تکرار تصویر پس زمینه در CSS

تکرار تصویر پس‌زمینه در CSS (background-repeat)

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

به‌صورت پیش‌فرض، تصویر پس‌زمینه هم به‌صورت افقی و هم به‌صورت عمودی تکرار می‌شود تا کل فضای عنصر را پوشش دهد.

اما برخی تصاویر بهتر است فقط در یک جهت (افقی یا عمودی) تکرار شوند؛ در غیر این صورت ممکن است ظاهر نامناسبی داشته باشند.

مثال: تکرار پیش‌فرض تصویر پس‌زمینه

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

تکرار افقی تصویر پس‌زمینه (repeat-x)

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

مثال:

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

 نکته: برای تکرار تصویر فقط در جهت عمودی، از مقدار repeat-y استفاده کنید:

background-repeat: repeat-y;

عدم تکرار تصویر پس‌زمینه (no-repeat)

برای نمایش تصویر پس‌زمینه فقط یک‌بار (بدون تکرار)، از مقدار no-repeat استفاده می‌شود.

مثال:

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

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

موقعیت تصویر پس‌زمینه در CSS (background-position)

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

به‌صورت پیش‌فرض، تصویر پس‌زمینه در گوشه بالا-چپ عنصر قرار می‌گیرد.

مثال: قرار دادن تصویر در گوشه بالا-راست

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

جدول ویژگی‌های background-repeat و background-position