CSS - تکرار تصویر پس‌زمینه (Background Image Repeat)
خصوصیت background-repeat در CSS به طور پیش‌فرض تصویر پس‌زمینه را هم به صورت افقی و هم عمودی تکرار می‌کند.
تکرار تصویر به صورت پیش‌فرض
در مثال زیر، تصویر هم به صورت افقی و هم عمودی تکرار می‌شود که ممکن است ظاهر نامناسبی داشته باشد:
مثال:
body {
background-image: url("gradient_bg.png");
}تکرار تصویر فقط به صورت افقی
اگر تصویر تنها به صورت افقی تکرار شود، نتیجه بهتری خواهد داشت:
مثال:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}نکته: برای تکرار تصویر به صورت عمودی، از دستور background-repeat: repeat-y; استفاده کنید.
عدم تکرار تصویر پس‌زمینه (no-repeat)
می‌توانید با استفاده از background-repeat: no-repeat، تصویر پس‌زمینه را تنها یک بار نمایش دهید.
مثال:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}تنظیم موقعیت تصویر پس‌زمینه (background-position)
برای جلوگیری از هم‌پوشانی تصویر و متن، می‌توان موقعیت تصویر را با استفاده از خصوصیت background-position تغییر داد.
مثال:
تنظیم تصویر پس‌زمینه در گوشه بالا-راست صفحه:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}خصوصیات تکرار و موقعیت تصویر پس‌زمینه در CSS
| خصوصیت | توضیحات |
|---|
| background-position | موقعیت شروع تصویر پس‌زمینه را مشخص می‌کند |
| background-repeat | نحوه تکرار تصویر پس‌زمینه را تعیین می‌کند |
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام