CSS 3 : ویژگی background-size در تنظیم بک گراند

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

Css3 اجازه می دهد تا بک گراند را در زمینه های متفاوت دوباره استفاده کنید.

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

contain : تصویر بک گراند را تا جایی که امکان دارد بزرگ تنظیم می کند اما به گونه ای که طول و عرض تصویر کاملا درون کادر قرار می گبرد .

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

مثال:

#example {
    border: 1px solid black;
    height:150px;
    width:70%;
    background:url(img1.gif);
    background-repeat: no-repeat;
    background-size: cover;
}


نمایش نتیجه کد
تمام حقوق مادی و معنوی این ساین متعلق به mojtaba khodadadi میباشد
  
2016 - 2020