خاصیت background-size در CSS3

با استفاده از خاصیت background-size می توانید اندازه تصویر پس زمینه را مشخص نمایید.

تا قبل از CSS3، ما باید تصویر پس زمینه را ابتدا کوچک می کردیم و سپس آنرا استفاده می کردیم. ولی در CSS3 می توانید از یک پس زمینه در چند اندازه مختلف استفاده نمایید.

برای مشخص کردن اندازه می توانید از پیکسل (px) یا درصد (%) استفاده نمایید. اگر اندازه را به درصد مشخص کنید، تصویر خروجی به طول و عرض عنصر والد بستگی خواهد داشت.

مثال 1

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

div
{
background:url(images/CSS/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
خودتان امتحان کنید »

مثال 2

بسط دادن تصویر پس زمینه (کشیدن):

div
{
background:url(images/CSS/img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
خودتان امتحان کنید »

آموزش های مرتبط

آموزش CSS3-پس زمینه