آموزش ویژگی background-repeat در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی background-repeat در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی background-repeat در CSS
با استفاده از ویژگی background-repeat
در CSS میتوان تنظیم کرد که تصویر زمینه بصورت افقی یا عمودی تکرار شود، و یا اینکه اصلا تکرار نشود.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی background-repeat
را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : در حالت عادی اگر از این ویژگی استفاده نشود، تصویر هم بصورت افقی و هم عمودی تکرار می شود
1 2 3 4 5 6 7 |
<style> body{ background-image:url('bg6.png'); } </style> |
مثال شماره ۲ : تکرار فقط بصورت افقی
1 2 3 4 5 6 7 |
<style> body{ background-repeat:repeat-x; } </style> |
مثال شماره ۳ : تکرار فقط بصورت عمودی
1 2 3 4 5 6 7 |
<style> body{ background-repeat:repeat-y; } </style> |
مثال شماره ۴ : تصویر زمینه تکرار نشود
1 2 3 4 5 6 7 |
<style> body{ background-repeat:no-repeat; } </style> |
Free-Learn
جدول مشخصات ویژگی background-repeat در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
مقدار پیش فرض | repeat |
---|---|
قابل ارث بری | ندارد | اطلاعات بیشتر |
قابل متحرک سازی | ندارد | اطلاعات بیشتر |
نسخه | CSS1 |
نحوه استفاده در جاوااسکریپت | object.style.backgroundRepeat=”repeat-x”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی background-repeat
در CSS پشتیبانی میکنند یا خیر.
نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
background-repeat | ۱٫۰ | ۱٫۰ | ۳٫۵ | ۱٫۰ | ۴٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
1 |
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی background-repeat در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
repeat | پیش فرض – تصویر زمینه بصورت افقی و عمودی تکرار میشود. |
repeat-x | تصویر زمینه فقط بصورت افقی تکرار میشود. |
repeat-y | تصویر زمینه فقط بصورت عمودی تکرار میشود. |
no-repeat | تصویر زمینه تکرار نمیشود. |
space | یک فضای خالی (سفید) بصورت مساوی بین تکه های تصویر ایجاد میشود. |
round | برخلاف مقدار بالا، تصویر تاجایی کشیده میشود که فضای خالی را پُر یا حذف کند. |
initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
اگر با استفاده از ویژگی background-position موقعیت قرار گیری تصویر زمینه را مشخص نکرده باشید، بصورت پیش فرض تصویر از بالا گوشه سمت چپ شروع می شود.