ویژگی background-repeat در CSS

ویژگی background-repeat در CSS

اگر شما یک عکس در صفحه وب خودتون داشته باشین ب استفاده از ویژگی background-repeat میتونین برای عکس تعیین کنین که اون عکس تکرار بشه یا نه و اینکه چجوری تکرار بشه .

می توان فقط پس زمینه را در جهت افقی تکرار کرد:

divclass {
  background-repeat: repeat-x;
}

و یا فقط در جهت عمودی:

divclass {
  background-repeat: repeat-y; /* = no-repeat repeat; */
}

همینطور در خیلی از مواقع نیاز است تا از رفتار پیشفرض که تکرار در هر دو جهت است جلوگیری کنیم و مانع تکرار شویم. برای این کار کافی است از مقدار no-repeat استفاده کنیم:

divclass {
  background-repeat: no-repeat;
}

حال فرض کنید برای یک عنصر دو و یا چند تصویر پس زمینه تعریف کرده ایم. و می خواهیم یکی از آنها تکرار شود و دیگری فقط در راستای افقی تکرار شود.

برای این کار می توان مقادیر تکرار مربوط به هر پس زمینه را توسط ویرگول از دیگر مقادیر جدا کرد:

div {
  background-repeat: repeat, repeat-x;
}

توجه کنید که باید مقادیر را به ترتیب بنویسید که هر کدام برای پس زمینه مورد نظرتان اعمال شوند.

این ویژگی دو کلمه کلیدی دیگر هم می پذیرد.

همانطور که گفته شد با توجه به اندازه عنصر و اندازه تصویر پس زمینه امکان اینکه تکه هایی از تکرار در کناره های عنصر بصورت ناقص و بریده شده نشان داده شوند وجود دارد. دو مقدار برای این ویژگی وجود دارند که می توانند از این اتفاق جلوگیری کنند:

۱-space

این مقدار باعث می شوند تا تصویر به تعدادی که در عنصر جا می شود تکرار شود و فضاهای خالی باقی مانده بین تکرارها بصورت مساوی تقسیم می شود.

از این مقدار نیز می توان برای هر دو جهت استفاده کرد و هم می توان فقط برای یک جهت آن را اعمال کرد. به عنوان نمونه:

div {
  background-repeat: space; /* برای هر دو جهت */
  background-repeat: space repeat; /* فقط جهت افقی */
}

۲-round

این مقدار باعث می شود که تصویر با توجه به اندازه اش تا جایی که فضا هست تکرار شود و اگر فضایی باقی ماند تکرارها کشیده می شوند (در جهتی که مشخص شده است) تا اینکه فضاهای خالی پر شوند:

div {
  background-repeat: round; /* برای هر دو جهت */
  background-repeat: round repeat; /* فقط جهت افقی */
  background-repeat: no-repeat round; /* فقط جهت عمودی */
}