تکرار پس زمینه (Background Repeat)
«تکرار پس زمینه (Background Repeat)» یعنی تصویر پس زمینه چند بار تکرار شود. پیش فرض، هم افقی و هم عمودی تکرار می شود و کل المان را می پوشاند.
تعریف و رفتار پیش فرض تکرار پس زمینه
ویژگی background-repeat مشخص می کند تصویر پس زمینه چگونه تکرار شود. پیش فرض repeat است؛ یعنی هم افقی، هم عمودی.
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
تکرار افقی (repeat-x)
اگر تصویر برای تکرار عمودی مناسب نیست، فقط افقی تکرار کن. این کار با background-repeat: repeat-x; انجام می شود.
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
نکته: برای تکرار فقط عمودی از repeat-y استفاده کن.
بدون تکرار (no-repeat)
گاهی تصویر را فقط یک بار می خواهی. از background-repeat: no-repeat; استفاده کن.
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
</style>
نکته: وقتی تکرار را خاموش می کنی، معمولاً لازم است موقعیت تصویر را هم تنظیم کنی.
موقعیت دهی تصویر (background-position)
با ویژگی background-position جای شروع تصویر را تعیین کن. پیش فرض، گوشه بالا-چپ است.
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
</style>
گام های عملی
- تصویر مناسب برای پس زمینه انتخاب کن.
- با
background-repeatنوع تکرار را مشخص کن. - در صورت نیاز،
background-positionرا تنظیم کن.
منابع داخلی: برای «تصویر پس زمینه» و «موقعیت تصویر پس زمینه» مراجعه کن. همچنین صفحه «تکرار پس زمینه» راهنمای کامل همین موضوع است.
جمع بندی سریع
repeatپیش فرض است و همه جهت تکرار می کند.repeat-xفقط افقی؛repeat-yفقط عمودی.no-repeatتصویر را یک بار نشان می دهد.- با
background-positionمزاحمت متن را کم کن.