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

استفاده از ویژگی background-repeat در CSS

ویژگی background-image به طور پیش فرض، یک تصویر را به صورت افقی و عمودی تکرار می کند. برخی تصاویر، تنها باید به صورت افقی یا تنها به صورت عمودی تکرار(repeat) شوند، وگرنه عجیب به نظر می رسند:

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

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

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

نکته: برای تکرار یک تصویر به صورت عمودی(vertically) می توانیم از دستور زیر استفاده کنیم:

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 برای مشخص کردن موقعیت(position) تصویر پس زمینه استفاده می شود.

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

ویژگی های تکرار پس زمینه و موقعیت تصویر پس زمینه