background-repeat)ویژگی background-repeat مشخص میکند که تصویر پسزمینه چگونه و به چه صورت در عنصر تکرار شود.
بهصورت پیشفرض، تصویر پسزمینه هم بهصورت افقی و هم بهصورت عمودی تکرار میشود تا کل فضای عنصر را پوشش دهد.
اما برخی تصاویر بهتر است فقط در یک جهت (افقی یا عمودی) تکرار شوند؛ در غیر این صورت ممکن است ظاهر نامناسبی داشته باشند.
body {
background-image: url("gradient_bg.png");
}
repeat-x)اگر تصویر بالا فقط بهصورت افقی تکرار شود، ظاهر پسزمینه بهتر خواهد بود:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
نکته: برای تکرار تصویر فقط در جهت عمودی، از مقدار repeat-y استفاده کنید:
background-repeat: repeat-y;
no-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;
}
background-repeat و background-position| ویژگی | توضیح |
|---|---|
background-repeat | نحوه تکرار تصویر پسزمینه را مشخص میکند (افقی، عمودی، بدون تکرار) |
background-position | محل شروع نمایش تصویر پسزمینه را تعیین میکند (مثلاً بالا-راست) |
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: courses