کارکردن با پس زمینه

ویژگی background-color 

با استفاده از ویژگی background-color می توانیم پس زمینه یک عنصر را مشخص کنیم. مقدار پیش فرض این ویژگی، مقدار شفاف (transparent) است.

background-color: transparent | <color>

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

background-color : #ccc;

ویژگی background-image 

این ویژگی یک تصویر را به عنوان پسزمینه مشخص می کند و آدرس تصویر را نیز با استفاده از تابع url مشخص می کنیم.
در حالت پیش فرض یک تصویر در پس زمینه تکرار می شود تا تمام عنصر را بپوشاند.

background-image : none | url();

آدرسی که در قسمت url مشخص می کنیم می تواند نسبت به آدرس فایل css یک آدرس ثابت یا یک آدرس نسبی باشد.

/* آدرس نسبی */
background-image :url(../images/myimg.jpg);
/* آدرس ثابت */
background-image : url(http://www.yourdomain.com/images/myimage.jpg);

ویژگی background-repeat 

به صورت پیش فرض تصویر پس زمینه هم به صورت عمودی و هم به صورت افقی تکرار می شود. با استفاده از ویژگی background-repeat می توانیم این خصوصیت را تغییر دهیم و مشخص کنیم که تصویر فقط به صورت افقی (repeat-y)، یا فقط به صورت عمودی (repeat-x) تکرار شود یا اینکه اصلا تکرار نشود (no-repeat).

background-repeat :repeat | repeat-x | repeat-y | no-repeat

ویژگی background-attachment 

هنگامی که نمای قابل مشاهده در پنچره مرورگر را پیمایش می کنید در حالت پیش فرض، پس زمینه در ادامه صفحه نیز ادامه پیدا می کند. این رفتار با استفاده از ویژگی background-attachment مشخص می شود که مقدار پیش فرض آن نیز scroll است. اگر مقدار این ویژگی را fixed انتخاب کنیم محل قرار گیری پس زمینه نسبت به نمای قابل مشاهده ثابت باقی می ماند و در این حالت حتی اگر کاربر صفحه را به بالا یا پایین پیمایش کند باز هم پس زمینه ثابت باقی می ماند.

background-attachment :scroll | fixed | local

در css نسخه 3، یک مقدار سوم نیز برای این ویژگی وجود دارد: local. این ویژگی پس زمینه را نسبت به محتوای عنصر ثابت می کند نه نسبت به کل نمای قابل مشاهده. با این مقدار پس زمینه فقط زمانی که عنصر را پیمایش می کنیم نسبت به محتوا پیمایش می شود (این قابلیت با استفاده از ویژگی overflow به دست می آید). این ویژگی فقط در نسخه های خاصی از مرورگرها پشتیبانی می شود:
Chrome 4+, Firefox 25+, IE 9+, Safari 5+, Opera 10.5+ 

ویژگی background-position 

با استفاده از ویژگی background-position می توانیم یک تصویر را در پس زمینه یک عنصر قرار دهیم. این ویژگی دارای دو مقدار است، یکی برای موقعیت عمودی تصویر و یکی برای موقعیت افقی تصویر. هر دوی این مقادیر را می توانیم بر اساس واحد طول یا درصدی از اندازه عنصر تعیین کنیم؛ البته می توانیم از مقادیر منفی نیز استفاده کنیم.
برای این دو مقدار، مقادیر از پیش تعریف شده نیز وجود دارد: top, center, & bottom برای موقعیت عمودی (vertical placement) و left, center, & right برای موقعیت افقی (horizontal placement).

background-position :<length><length> | <percentage><percentage>|
			top/ center/ bottom + left/ center/ right

در حالت پیش فرض تصویر در قسمت بالا و سمت چپ منطقه padding عنصر والد قرار می گیرد. تمام مقادیری که به موقعیت تصویر داده می شود به نسبت همین نقاط اعمال خواهند شد. به عنوان مثال، ویژگی زیر تصویر را به اندازه 5 پیکسل به سمت پایین و به اندازه 10 پیکسل به سمت راست منتقل می کند: background-position :5px 10px; در نسخه 3 از css، 4 ویژگی وجود دارد، و به شما این امکان را می دهد که مشخص کنید تصویر نسبت به عنصری که درون آن قرار دارد در کدام سمت قرار گیرد. با استفاده از این روش، در مثال زیر مشخص می کنیم که تصویر به جای اینکه نسبت به نقطه بالا سمت چپ جایگزاری شود، نسبت به نقطه پایین سمت راست جایگزاری شود:

background-position : bottom 5px right 5px;

این شیوه فقط در نسخه های خاصی از مرورگرها پشتیبانی می شوند:
Chrome 25+, Firefox 13+, IE 9+, Safari 5.28+, Opera 10.5+

ویژگی background-size 

اندازه تصویر پس زمینه در حالت عادی برابر با اندازه اصلی تصویر مورد استفاده است. ما می توانیم با استفاده از ویژگی background-size اندازه تصویر را تغییر دهیم. با این کار می توانیم اندازه های تصویر را بر اساس پیکسل یا به نسبت درصدی از منطقه قرارگیری پس زمینه تغییر دهیم.

background-size (1-2) : auto | <length> | <percentage> | cover | contain

دو مقدار وجود دارد، یکی برای مشخص کردن عرض تصویر و دیگری برای مشخص کردن طول تصویر.

background-size : 150% 100%; 

اگر فقط یک مقدار را برای این ویژگی بنویسیم، عرض تصویر را تعیین می کند. در این صورت ارتفاع تصویر به صورت خودکار(auto) تعیین می شود و نسبت بین اجزای تصویر نیز حفظ خواهد شد (aspect ratio):

background-size : 150%;

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

این ویژگی در نسخه css3 اضافه شده است و بنابراین در نسخه های خاصی از مرورگرها پشتیبانی می شود:
Chrome4+, Firefox4+, IE9+, Safari9+, Opera10.5+. برای اینکه از این ویژگی در نسخه های Chrome1+, Safari3+, Firefox3.6+ بتوانید استفاده کنید از پیشوندهای –webkit, -moz استفاده کنید. 

ویژگی background-clip

محدوده رنگ آمیزی مربوط به یک تصویر پسزمینه یا رنگ پسزمینه را می توان با استفاده از ویژگی background-clip تعیین کرد.

background-clip :border-box | padding-box | content-box

در حالت عادی، پسزمینه تا لبه خارجی مرز (border-box) گسترش دارد و زیر هر مرز قابل مشاهده قرار می گیرد. وقتی که مقدار padding-box انتخاب شده باشد پسزمینه در داخل محدوده padding قرار می گیرد. مقدار سوم، content-box است که در این حالت پسزمینه در محدوده محتوا قرار می گیرد. در مثال زیر زمینه پسزمینه تا لبه خارجی محتوا گسترش می یابد:

background-clip :content-box; 

ویژگی background-clipدر نسخه های خاصی از مرورگرها پشتیبانی می شود:
Chrome1+, Firefox4+, IE9+, Safari3+

ویژگی background-origin 

ویژگی background-origin نقطه آغازین تصویر پسزمینه یا رنگ پسزمینه را مشخص می کند.

background-origin :padding-box | border-box | content-box

به صورت عادی تصویر پسزمینه از نقطه بالا سمت چپ منطقه padding (padding-box) آغاز می شود. اما می توان این نقطه را تغییر داد و به نقطه بالا سمت چپ ناحیه مرز (border-box) منتقل کرد یا می توان این نقطه را به نقطه بالا سمت چپ ناحیه محتوا (content-box) منتقل کرد.
ویژگی background-originمعمولا به همراه ویژگی background-clip استفاده می شود. به مثال زیر توجه کنید:

background-origin : content-box;
background-clip :content-box;

ویژگی background-origin در نسخه css3 ارائه شده است که در نسخه های خاصی از مرورگرهای وب پشتیبانی می شود:
Chrome4+, Firefox4+, IE9+, Opera10.5+, Safari5+. با استفاده از پیشوندهای –moz و –webkitتمام نسخه های فایرفاکس، و کرم و همچنین Fafari4+ از این ویژگی ها پشتیبانی می کنند (مثال زیر). توجه داشته باشید که فایرفاکس تا قبل از نسخه 4 خود از مقادیر padding و border استفاده می کند. و قبل از آن نیز هیچ مقداری برای مشخص کردن content box وجود ندارد.

/* Chrome 1-3, Safari 4 */
-webkit-background-origin : border-box;
/* Firefox 1-3.6 */
-moz-background-origin : border;
background-origin : border-box;

ویژگی background 

ویژگی background یک میانبر برای تنظیم کردن تمام ویژگی های مربوط به پسزمینه در یک اعلان به صورت یکجا است.

background : <background-color> | <background-image> |
<background-repeat> | <background-attachment> |
	<background-position> | <background-size> |
	<background-clip> | <background-origin>

ترتیب ذکر شدن مقادیر مهم نیست به خاطر اینکه هیچ گوه ابهامی در ذکر کردن مقادیر وجود ندارد. هر کدام از مقادیر را می توان کنار گذاشت؛ اما توجه داشته باشید که اگر یک مقدار را کنار بگذاریم، مقدار پیش فرض آن در نظر گرفته می شود.

background :url(bg.png) no-repeat fixed right bottom;

در بیشتر مواقع هنگامی که برای پسزمینه بیشتر از یک مقدار را می خواهیم تنظیم کنیم ترجیح داده می شود که از ویژگی میانبر استفاده کنیم تا کار آسان تر انجام شود. این شیوه باعث می شود اجرای کدها آسان تر انجام شود و نگهداری آن نیز نسبت به استفاده از ویژگی های جداگانه و چندخطی راحت تر اشد.
مثلا اگر دستور بالا را به صورت ویژگی های جداگانه بنویسیم خواهید دید که کدهای ما بیشتر شده و نگهداری و ویرایش آنها پیچیده تر خواهد شد:

background-image :url(bg.png);
background-repeat : no-repeat;
background-attachment :fixed;
background-position :right bottom;

چند پسزمینه (پسزمینه چندگانه)

ما می توانیم بیشتر از یک پسزمینه را به یک عنصر نسبت دهیم. برای این کار برای هر ویژگی می توانیم بیشتر از یک مقدار قرار دهیم و بین مقادیر از علامت ویرگول (,) استفاده کنیم. اولین پسزمینه که در فهرست قرار گرفته است در قسمت بالا ظاهر می شود، و هر پسزمینه دیگر در قسمت شفاف پسزمینه که در قسمت بالا قرار دارد قابل مشاهده است.

background-image :url(bg1.png), url(bg2.png);
background-repeat :no-repeat , repeat-y;
background-attachment :fixed, fixed;
background-position :right bottom, top left;

برای استفاده از چند پسزمینه نیز می توان از روش میانبر استفاده کرد. برای این کار به شکل زیر عمل می کنیم.

background :url(bg1.png) no-repeat fixed right bottom,
	url(bg2.png) repeat-y fixed top left;

پشتیبانی از چند پسزمینه در نسخه css3 اضافه شده است و در نسخه های خاصی از مرورگرها جواب می دهد:
Chrome4+, Firefox3.6+, IE9+, Safari3.1+, Opera10.5+. در مرورگرهای وب که از این ویژگی پشتیبانی نمی کنند همان تصویر اولیه تکرار می شود.

background-image :bg.png; /* تصویری که جایگزین می شود */
background-image :bg1.png, bg2.png;