در CSS3 تعدادی صفت پس زمینه جدید وجود دارد که کنترل بهتری بر روی عنصر پس زمینه ایجاد می کند.

در این درس یاد خواهید گرفت که چگونه تصاویر متعدد پس زمینه برای یک عنصر تعیین کنید.

همچنین درباره صفات جدید زیر یاد خواهید گرفت :

• - background-size
• - background-origin
• - background-clip

پشتیبانی مرورگرها

شماره روبروی هر مرورگر نشان دهنده اولین نسخه پشتیبانی کننده از صفت border-image می باشد.

شماره هایی که با عبارات -webkit- یا -moz- یا -o- همراه هستند نشان دهنده اولین نسخه ای هستند که با prefix کار می کند.

پس زمینه های متعدد در CSS3

css3 این امکان را فراهم آورده است تا بتوانیم با استفاده از صفت background-image ، برای یک عنصر ،  تصاویر متعدد پس زمینه تعیین کنیم.

تصاویر متفاوت پس زمینه با کاما از هم جدا می شوند.و تصاویر در بالای یکدیگر قرار می گیرند و اولین تصویر به بازدیدکننده نزدیک تر خواهد بود.

مثال زیر دو تصویر پس زمینه دارد. اولی یک گل (در قسمت پایین راست ترازبندی شده است) و دومی یک پس زمینه کاغذی است (که بر روی بالا-چپ ترازبندی شده است).

مثال :

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

تصاویر متعدد پس زمینه می توانند از طریق صفات تک به تک پس زمینه تعیین شوند یا با استفاده از صفت خلاصه نویسی bakcground.

مثال زیر از صفت خلاصه background استفاده می کند. (که همان نتیجه مثال قبل را دارد)

مثال :

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

اندازه پس زمینه در CSS3

صفت background-size در css3 به شما امکان تعیین اندازه پس زمینه را می دهد.

قبل از css3 اندازه تصویر پس زمینه ، همان اندازه اصلی تصویر بود. در css3 می توان همان تصاویر را در محتوای دیگر با اندازه های مختلف به عنوان تصویر پس زمینه استفاده کرد.

اندازه پس زمینه می تواند بر اساس طول ، درصد یا دو کلمه کلیدی contain یا cover تعیین شود.

مثال زیر ، اندازه تصویرپس زمینه را بر روی اندازه ای خیلی کوچکتر از تصویر اصلی تنظیم می کند ( با استفاده از pixel).

مثال :

#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

دو مقدار قابل استفاده برای background-size کلمات contain و cover هستند.

کلمه کلیدی contain تصویر زمینه را تا جایی که امکان دارد بزرگ می کند. اما باید هم عرض و هم ارتفاع تصویر داخل محدوده محتوا باقی بماند. با توجه به تناسب میان تصویر پس زمینه و ناحیه قرارگیری پس زمینه ، ممکن است بخش هایی از ناحیه محتوا کاملا توسط پس زمینه پوشش داده نشوند.

کلمه کلیدی cover تصویر پس زمینه را به قدری تغییر اندازه می دهد تا تمام ناحیه پس زمینه توسط تصویر پس زمینه پوشش داده شود. که در این صورت ممکن است بخش هایی از تصویر پس زمینه در ناحیه پس زمینه قابل مشاهده نباشد.

مثال زیر استفاده از contain و cover را نمایش می دهد.

مثال :

#div1 {
    background: url(img_flower.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flower.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

تعیین اندازه تصاویر متعدد پس زمینه

صفت background-size برای اندازه پس زمینه ،زمانی که با تصاویر متعددی برای پس زمینه کار می کنیم ، مقادیر متعددی قبول می کند. (با استفاده از یک لیست ابعاد که با کاما از یکدیگر جدا شده اند.)

مثال زیر دارای سه تصویر پس زمینه تعیین شده می باشد که با اندازه های مختلفی برای هر تصویر ، تنظیم شده است.

مثال :

#example1 {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}

تصاویر پس زمینه با اندازه کامل

حالا می خواهیم پس زمینه ای داشته باشیم که در هر لحظه تمام صفحه مرورگر را پر کند. پس به موارد زیر نیاز داریم :

- پوشش کامل صفحه با تصویر (بدون فضای سفید)

- تغییر اندازه تصویر به اندازه مورد نیاز

- وسط چین کردن تصویر روی صفحه

- عدم ایجاد نوار اسکرول

مثال زیر نحوه انجام این کار را نمایش می دهد. از عنصر html استفاده کنید. سپس یک پس زمینه ثابت و وسط چین روی آن تنظیم کنید. سپس اندازه آن را با استفاده از صفت bakcground-size تعیین کنید.

مثال :

html {
    background: url(img_flower.jpg) no-repeat center fixed; 
    background-size: cover;
}

صفت background-origin در CSS3

صفت background-origin در CSS3 تعیین می کند که تصویر پس زمینه در کجای صفحه قرار بگیرد.

این صفت سه مقدار مختلف دریافت می کند :

- border-box : تصویر پس زمینه از گوشه بالا-چپ حاشیه شروع می شود

- padding-box : تصویر پس زمینه از گوشه بالا-چپ لبه فاصله میان محتوا و حاشیه شروع می شود. (پیش فرض)

- content-box : تصویر پس زمینه از گوشه بالا-چپ محتوا شروع می شود.

مثال زیر صفت background-origin را نمایش می دهد.

مثال :

#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: content-box;
}

صفت bakcground-clip در CSS3

صفت bakcground-clip در CSS3 ناحیه رنگ پذیری (پر شدن) پس زمینه را مشخص می کند.

این صفت سه مقدار مختلف دریافت می کند :

- border-box : تصویر پس زمینه تا لبه بیرونی حاشیه پر می شود. (پیش فرض)

- padding-box : تصویر پس زمینه تا لبه بیرونی فاصله میان محتوا و حاشیه  پر می شود.

- content-box : تصویر پس زمینه در میان باکس محتوا کشیده می شود.

مثال زیر صفت background-clip را نمایش می دهد.

مثال :

#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}