تکرار پس‌زمینه CSS

CSS 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;。

CSS background-repeat: no-repeat

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

مثال

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

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

آزمایش کنید

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

background-position CSS

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

مثال

گذاشتن تصویر پس‌زمینه در گوشه بالا سمت راست:

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

آزمایش کنید