آموزش پس زمینه در css

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

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

background-image: url(...);

 url نام و آدرس تصویر را مشخص می کند که باید به صورت نسبى ذکر شود.

.intro {
background-image: url(tree.png);
}

در این مثال  یعنى تصویر tree.png به عنوان پس زمینه  المان با کلاس intro. قرار گیرد. که در اینجا باید تصویر و فایل css در یک پوشه باشند و اگر تصویر در پوشه دیگری باشد باید آدرس نسبی آن را بنویسیم.

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

body {
background-image: url(tree.png);
}

1- background-repeat

هنگامى که تصویرى را به عنوان پس زمینه تعیین مى کنیم، رفتار پیش فرض مرورگر این است که تصویر را در بالا سمت چپ قرار می دهد و سپس در جهات افقى و عمودى آن را تکرار مى کند تا پس زمینه پر شود. به این حالت tiling می گویند و با خاصیت background-repeat مى توان آن را کنترل کرد.

background-repeat: type;

که type مى تواند یکى از مقادیر , repeat , repeat-x , repeat-y , round no-repeat و space باشد.

repeat  : در دو جهت افقى و عمودى تصویر تکرار مى شود.

repeat-x  : تصویر در جهت افقى تکرار مى شود.

repeat-y  : تصویر در جهت عمودى تکرار مى شود.

no-repeat  : تصویر تکرار نمى شود.

round  : تصویر در دو جهت افقى و عمودى تکرار مى شود ولى تغییر اندازه می دهد تا همه تصاویر در فضاى موجود جا بگیرند.

space  : تصویر در دو جهت افقى و عمودى تکرار مى شود و فضاى خالى طورى بین آنها قرار می گیرد که بدون تغییر اندازه تصویر در فضاى موجود جا بگیرد.

2- background-attachment

تصویر پس زمینه به المان مربوطه متصل مى شود و با اسکرول محتواى المان، پس زمینه نیز اسکرول مى شود. این رفتار را مى توان با background-attachment کنترل کرد.

background-attachment: type;

در اینجا type مى تواند مقادیر زیر را دریافت کند :

scroll  حالت پیش فرض است که تصویر پس زمینه هنگام اسکرول صفحه اصلى حرکت می کند ولى با اسکرول المان حرکت نمی کند.

fixed  تصویر پس زمینه ثابت است و حرکت نمی کند.

local  با اسکرول صفحه اصلى و اسکرول المان تغییر می کند.

3- Background-position

background-position: horizontal vertical;

مقادیر horizontal و vertical مختصات تصویر را تعیین می کنند .

background-position: 20% 10% ;

یعنى تصویر به اندازه 20 درصد طول المان (width) از سمت چپ و 10 درصد ارتفاع از بالا قرار بگیرد.

اگر فقط یک مقدار تعیین کنیم آن مقدار را براى هر دو جهت افقى و عمودى در نظر می گیرد:

background-position: 30px;

مى توانیم از کلمات کلیدى right , left , top , bottom هم استفاده کنیم :

background-position: right bottom;

یعنى تصویر پس زمینه در سمت راست و پایین المان قرار بگیرد.

4- background-clip

به طور پیش فرض تصاویر پس زمینه فقط به محتواى المان و قسمت padding اعمال مى شود، براى کنترل این رفتار از background-clip استفاده می کنیم.

background-clip: type;

در اینجا type یکى از مقادیر زیر را می تواند دریافت کند :

content-box  : پس زمینه فقط به قسمت محتواى المان اعمال مى شود.

padding-box  : پس زمینه به قسمت محتوا و padding اعمال مى شود.

border-box  : پس زمینه به قسمت محتوا و padding و border اعمال مى شود.

5- background-origin

هنگامى که مختصات تصویر پس زمینه را تعیین می کنیم نسبت به قسمت padding محاسبه مى شود، اگر بخواهیم این رفتار نیز تغییر کند از خاصیتbackground-origin  استفاده می کنیم :

background-origin: type;

که type مى تواند یکى از مقادیر زیر را دریافت کند :

content-box  : مختصات نسبت به قسمت محتواى المان محاسبه مى شود.

padding-box  : مختصات نسبت به padding المان محاسبه مى شود.

border-box  : مختصات نسبت به border المان محاسبه مى شود.

6- background-size

به طور پیش فرض اندازه تصویر پس زمینه برابر اندازه واقعى عکس مى باشد اما مى توان این اندازه را به کمک خاصیت background-size تغییر داد.

background-size: width height;

که width و height طول و عرض تصویر را تعیین می کند.

background-size: 300px 200px;

یا

background-size: 100% 50%;

همچنین مى توان از کلمات cover , auto و contain نیز استفاده کرد.

auto  : براساس اندازه واقعى عکس

background-size:auto 200px;

ارتفاع پس زمینه 200px و مقدار width به طور اتوماتیک طورى تغییر اندازه می دهد که نسبت طول به عرض تصویر حفظ شود.

cover  : تصویر طورى تغییر اندازه مى دهد که کل فضا را بپوشاند البته با حفظ نسبت طول به عرض تصویر، یعنى ممکن است قسمتى از تصویر crop شود.

contain  : تصویر طورى تغییر اندازه می دهد که کل تصویر در فضاى المان جا بگیرد و بنابراین ممکن است فضاى خالى به وجود آید.

به جاى استفاده از خاصیت هاى فوق به طور جداگانه مى توان از خاصیت background به صورت کوتاه شده نیز استفاده کرد :

background:color url(img) position / size repeat attachment origin clip;

بطور مثال:

body {
background: red url(tree.png) center center / 10% 10% no-repeat fixed content-box content-box;
}

ذکر همه موارد فوق الزامى نیست و اگر ننویسیم مقادیر پیش فرض در نظر گرفته مى شوند.

می توانیم به یک المان چندین پس زمینه اعمال کنیم که لازم است براى هرکدام جداگانه خصوصیت ها را تعیین کنیم و آنها را با ، از هم جدا کنیم.

header {
background: url(back2.png) top left no-repeat, url(tree.png) center center no-repeat;
}

یا به صورت زیر

header {
background-image: url(back2.png),url(tree.png);
background-position: top left, center center;
background-repeat: no-repeat;
background-color: red;
}

که در اینجا background-color و background-repeat براى هر دو پس زمینه فوق تکرار شده اند.