background-repeat

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

به‌طور پیش‌فرض، ویژگی background-image یک تصویر را به صورت افقی و عمودی تکرار می‌کند.[۱]

بعضی از تصاویر باید فقط به صورت افقی یا عمودی تکرار شوند، در غیر اینصورت آن‌ها عجیب به نظر می‌رسند، مانند این:

مثال

body {
  background-image: url("gradient_bg.png");
}


اگر تصویر بالا فقط به صورت افقی تکرار شود (background-repeat: repeat-x;)، پس زمینه بهتر به نظر می‌رسد:

مثال

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}


نکته: برای تکرار یک تصویر به صورت عمودی، ویژگی background-repeat را برابر با repeat-y قرار دهید.

ویژگی background-repeat: no-repeat در CSS

نمایش تصویر پس زمینه فقط یک بار با ویژگی background-repeat مشخص می‌شود:

مثال

نمایش تصویر پس زمینه فقط یک بار:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}


در مثال بالا، تصویر پس زمینه در همان محل متن، قرار می‌گیرد. ما می‌خواهیم که موقعیت تصویر را تغییر دهیم، بنابراین مشکل زیادی برای متن ایجاد نمی‌شود.

ویژگی background-position در CSS

از ویژگی background-position برای تعیین موقعیت تصویر پس زمینه استفاده می‌شود.

مثال

موقعیت تصویر پس زمینه در گوشه بالا سمت راست تنظیم می‌کند:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}


منابع آموزشی