CSS Background Repeat

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;
}

آزمایش کنید

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

CSS background-position

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

مثال

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

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

آزمایش کنید