زوپیرنت

background
با این خصوصیت می توانیم پس زمینه صفحات وب و همینطور هر تگ، باکس و … را مشخص کنیم. برای background می توانیم رنگ یا عکسی خاص در نظر بگیریم. همین طور می توانیم یک عکس را در background تکرار کنیم که قابلیت مناسبی برای طراحی صفحات وب می باشد.
برای کار با background، ابتدا یک box در صفحه html تعریف می کنیم.

<div id="box"></div>

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

#box{
 width:320px;
 height:180px;
 background-color:cadetblue;
}

با background-color، می توانیم رنگ پس زمینه را مشخص کنیم. خروجی به صورت زیر است.

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

#box{
 background-image:url('zoopirnet.png');
 width:320px;
 height:180px;
}

برای آدرس دهی در CSS، اینگونه عمل می کنیم

url(‘ ’);

در بین این ‘ ‘، نام فایل مورد نظر را با پسوند می نویسیم. چنانچه فایل ما، در پوشه ای که CSS در آن قرار دارد، نباشد، باید به روش زیر آدرس دهی کنیم.

url('../zoopirnet.jpg');

یعنی یک فولدر قبل تر

#box{
 background-image:url('zoopirnet.png');
 width:320px;
 height:180px;
}

خروجی به صورت زیر است.

می بینید که عکس، به طور خودکار تکرار می شود تا کل فضای box (در اینجا ۳۲۰پیکسل در ۱۸۰ پیکسل ) را کامل کند. چنانچه نیاز نباشد عکستان تکرار شود، مطابق زیر عمل کنید.

#box{
 background-image:url('zoopirnet.png');
 background-repeat:no-repeat;
 width:320px;
 height:180px;
}

یعنی خصوصیت background-repeat را مساوی no-repeat قرار دهید. با این کار عکستان فقط یک بار در آن box، می آید.

مقادیر دیگری که می توان برای background-repeat قرار داد، آیتم های زیر است:
repeat: که باعث تکرار هم در محور x و هم در محور y می شود.
repeat-x: تکرار در محور x ها
repeat-y: تکرار درمحور y ها

چنانچه بخواهید عکستان در قسمت خاصی از این box نمایش داده شود، می توانید از خاصیت background-position استفاده کنید. در این جا از center استفاده کردیم، ولی می توانید مقادیر left یا right را هم استفاده کنید.

#box{
 background-image:url('zoopirnet.png');
 background-repeat:no-repeat;
 background-position:center;
 width:320px;
 height:180px;
}

چون از center استفاده کردیم، پس عکس را وسط box می اندازد.

استفاده از gradient در background: همانطور که می دانید رنگ های gradient طیف رنگ هستند که از یک رنگ شروع و به رنگ دیگری تمام می شود. در این جا می خواهیم از یک gradient استفاده کنیم. برای ایجاد آن می توانید از نرم افزار فوتوشاپ استفاده کنید. به دلیل این که box ما در سی اس اس، ۱۸۰ پیکسل ارتفاع دارد، در فوتوشاپ یک مستطیل با عرض ۲ در ارتفاع ۱۸۰ پیکسل تعریف می کنیم. سپس یک gradient که از آبی تا آبی کمرنگ است، استفاده می کنیم. نتیجه کار را با نام gradient.jpg ذخیره می کنیم. حال در قسمت CSS کدهای زیر را می نویسیم.

#box{
 background-image:url('gradient.jpg');
 background-repeat:repeat-x;
 width:320px;
 height:180px;
}

در بخش background-image، عکسی که با فوتوشاپ درست کردیم را فراخوانی می کنیم و در background-repeat، می گوییم که این عکس فقط در محور x ها تکرار شود. خروجی به صورت زیر خواهد بود:

ضمنا می توان background را هم مانند دیگر دستورات در CSS مانند font به طور خلاصه نوشت.

background:url('gradient.jpg') repeat-x;

 دانلود عکس gradient.jpg