سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه گذشته آموختیم که چگونه از ویژگی background-position در CSS استفاده کنیم؛ ویژگی background-position موقعیت شروع پس زمینه یک تصویر را تنظیم می کند.
در این جلسه شما را به آموزش کار با ویژگی background-repeat در CSS می پردازیم.
آموزش کار با ویژگی background-repeat در CSS
به مثال زیر توجه نمایید. در این مثال یک تصویر پس زمینه را به صورت عمودی تکرار کرده ایم.
مثال :
| body { background-image: url("paper.gif"); background-repeat: repeat-y; } |
تعریف و کاربرد
با کمک ویژگی background-repeat می توان تعیین کرد که تصویر زمینه به چه صورت ( افقی یا عمودی ) تکرار شود. به طور پیش فرض ، یک تصویر پس زمینه هم به صورت عمودی و هم به صورت افقی تکرار می شود.
نکات و توصیه ها
نکته
تصویر پس زمینه با توجه به ویژگی background-position موقعیت خود را تعیین می کند. اگر هیچ ویژگی background-position در کار نباشد؛ در آن صورت تصویر همیشه در گوشه بالا سمت چپ عنصر قرار می گیرد.
| مقدار پیش فرض | repeat |
| به ارث بردن | خیر |
| متحرک بودن | بله |
| نسخه | CSS1 |
| سینتکس JavaScript | “object.style.backgroundRepeat=”repeat-x” |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی background-repeat در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| background-repeat | ۱٫۰ | ۱٫۰ | ۳٫۵ | ۱٫۰ | ۴٫۰ |
نکته
اینترنت اکسپلور ۸ و نسخه های قبل تر از آن از چندین تصویر پس زمینه بر روی یک عنصر پشتیبانی نمی کنند.
سینتکس CSS
مثال :
| background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit; |
مقدار ویژگی
| مقدار | توضیحات |
|---|
| repeat | پیش فرض – تصویر پس زمینه هم به صورت عمودی و هم به صورت افقی تکرار می شود. در صورت مناسب بودن ، آخرین تصویر بریده می شود. |
| repeat-x | تصویر پس زمینه فقط به صورت افقی تکرار می شود. |
| repeat-y | مقدار اول موقعیت افقی و مقدار دوم عمودی است. گوشه بالا سمت چپ ۰ است. واحد می تواند پیکسل (۰px 0px) یا هر واحد CSS دیگر باشد. اگر فقط یک مقدار را مشخص کنید ، مقدار دیگر ۵۰٪ خواهد بود. می توانید٪ و موقعیت ها را با هم مخلوط کنید. |
| no-repeat | تصویر پس زمینه فقط به صورت عمودی تکرار می شود. |
| space | تصویر پس زمینه تا حد امکان بدون قطع شدن تکرار می شود. اولین و آخرین تصاویر به دو طرف این عنصر پین شده و فضای سفید به طور مساوی بین تصاویر توزیع می شود. |
| round | تصویر پس زمینه برای پر کردن فضا تکرار و خرد شده یا کشیده می شود (بدون شکاف). |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
مثال های بیشتر
مثال یک
یک تصویر پس زمینه را به صورت عمودی و افقی تکرار کنید (این مثال، مثال پیش فرض است):
مثال :
| body { background-image: url("paper.gif"); background-repeat: repeat; } |
مثال دو
یک تصویر پس زمینه را فقط به صورت افقی تکرار کنید:
مثال :
| body { background-image: url("paper.gif"); background-repeat: repeat-x; } |
مثال سه
یک تصویر پس زمینه را تکرار نشود و تصویر فقط یک بار نشان داده شود:
مثال :
| body { background-image: url("paper.gif"); background-repeat: no-repeat; } |
مثال چهار
استفاده از background-repeat: space و background-repeat: round :
مثال :
| #example2 { border: 2px solid black; padding: 25px; background: url("w3css.gif"); background-repeat: space; } #example3 { border: 1px solid black; padding: 25px; background: url("w3css.gif"); background-repeat: round; } |
مثال پنج
ایجاد یک تصویر “hero” با استفاده از ویژگی های مختلف پس زمینه :
مثال :
| .hero-image { background-image: url("photographer.jpg"); /* The image used */ background-color: #cccccc; /* Used if the image is unavailable */ height: 500px; /* You must set a specified height */ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */ } |
کلام آخر
در این جلسه به بررسی و آموزش کار با ویژگی background-repeat در CSS پرداختیم و آموختیم که این ویژگی به کمک می کند تا تعیین کنیم که تصویر پس زمینه به چه صورتی تکرار شود.
در جلسه آینده آموزش کار با ویژگی background-size در CSS را ارائه خواهیم کرد.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
