خصوصیت background-repeat
مثال (خصوصیت background-repeat)
تکرار عکس پس زمینه به صورت افقی:
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
تعریف و کاربرد
با استفاده از خصوصیت background-repeat، می توانید نحوه تکار عکس پس زمینه را در جهت افقی و عمودی مشخص نمایید. (اگر مایل به تکرار آن هستید)
بصورت پیشفرض، عکس پس زمینه در هر دو جهت افقی و عمودی تکرار می شود.
| مقدار پیشفرض | repeat |
|---|---|
| ارث بری | خیر |
| نسخه | CSS1 |
| JavaScript ساختار | object.style.backgroundRepeat="repeat-y" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت background-repeat را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.
نکته ها و ترفندها
نکته: عکس پس زمینه طبق مقداری که برای خصوصیت background-position تنظیم نموده اید مکان دهی می شود. اگر مقداری برای این خصوصیت تنظیم ننمایید، عکس همیشه در گوشه بالا سمت چپ قرار می گیرد.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| repeat | عکس پس زمینه در هر دو جهت تکرار می شود. (مقدار پیشفرض) | نمایش دادن » |
| repeat-x | عکس پس زمینه در جهت افقی تکرار می شود. | نمایش دادن » |
| repeat-y | عکس پس زمینه در جهت عمودی تکرار می شود. | نمایش دادن » |
| no-repeat | عکس پس زمینه تکرار نمی شود. | نمایش دادن » |
| inherit | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
مثال - خودتان امتحان کنید
تکرار عکس پس زمینه بصورت افقی و عمودی
این مثال نحوه ی تکرار عکس پس زمینه را در هر دو جهت افقی و عمودی نشان می دهد.
تکرار عکس پس زمینه بصورت افقی
این مثال نحوه ی تکرار عکس پس زمینه را در جهت افقی نشان می دهد.
نمایش عکس پس زمینه فقط یکبار
این مثال نحوه ی جلوگیری از تکرار عکس پس زمینه را نشان می دهد.
بیاموزهای مرتبط
Styling Backgrounds (بیاموز CSS)
background-position (مرجع خصوصیت های CSS)
- نوشته شده توسط elham
- بازدید: 8459
