اندازه پس زمینه (Background Size)
ویژگی «اندازه پس زمینه (Background Size)» اندازه تصویر پس زمینه را تعیین می کند. واحدها می توانند «پیکسل»، «درصد»، یا «کلیدواژه» باشند. کلیدواژه ها: auto، contain، cover.
ویژگی background-size چیست؟
با background-size اندازه تصویر پس زمینه را دقیق کنترل می کنیم. سپس تصویر در همان اندازه نمایش داده می شود.
مثال: تعیین اندازه با پیکسل
#div1 {
background-image: url(img_flower.jpg);
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
}
auto، contain و cover
auto یعنی اندازه اصلی تصویر. contain تصویر را داخل جعبه جا می دهد. cover کل جعبه را می پوشاند.
#div1 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: contain;
}
#div2 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: cover;
}
#div3 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: auto;
}
چند تصویر و چند اندازه
برای چند پس زمینه می توان چند مقدار size با «کاما» نوشت. ترتیب مقدارها مطابق ترتیب تصاویر است.
#div1 {
background-image: url(img_tree.gif), url(img_flwr.gif), url(paper.gif);
background-position: left top, right bottom, left top;
background-repeat: no-repeat, no-repeat, repeat;
background-size: contain, 150px, auto;
}
پس زمینه تمام صفحه
می خواهیم تصویر کل صفحه را بپوشاند. بنابراین از cover استفاده می کنیم.
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
ساخت هِرو (Hero) با cover
هِرو یعنی بنر بزرگ بالای صفحه. متن روی آن می آید.
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
گام های عملی سریع
- تصویر مناسب را انتخاب کن.
- مکان تصویر را با
background-positionبده. - اندازه را با
background-sizeتنظیم کن. - برای کل صفحه از
coverاستفاده کن.
نکته: برای چند تصویر، اندازه ها را به همان ترتیب بنویس.
نکته: برای آشنایی بیشتر با چند پس زمینه، صفحه پس زمینه های چندگانه را ببین.
برای مرور موضوع «اندازه پس زمینه»، این لینک را باز کن: اندازه پس زمینه. همچنین مبحث background-origin را بعداً بخوان.
جمع بندی سریع
autoاندازه اصلی تصویر است.containتصویر را کامل جا می دهد.coverکل جعبه را می پوشاند.- برای چند تصویر، چند اندازه بنویس.