اندازه پس زمینه در CSS (Background Size)
ویژگی «اندازه پس زمینه (Background Size)» در CSS تعیین می کند تصویر پس زمینه با چه اندازه ای نمایش داده شود. می توانید از طول ها، درصدها یا واژه های کلیدی auto، contain و cover استفاده کنید.
ویژگی background-size در CSS
برای تغییر اندازه تصویر، مقدار پیکسلی یا درصدی بدهید. در نمونه زیر تصویر کوچک تر از اندازه اصلی رندر می شود.
#div1 { background-image: url(img_flower.jpg); background-position: right top; background-repeat: no-repeat; background-size: 100px 80px; }background-size: 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; }نکته: برای مرور مفاهیم چندپس زمینه به بخش پس زمینه چندگانه سر بزنید.
اندازه دهی به چند پس زمینه
هنگام استفاده از چند تصویر، می توانید برای هر لایه یک مقدار جداگانه background-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; }پس زمینه تمام صفحه (Full Size)
برای پوشاندن کل پنجره مرورگر بدون اسکرول، پس زمینه را روی ریشه اعمال کنید و از 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-origin) را برای کنترل مبدأ جای گذاری ببینید. همچنین برای مرور سریع، لینک اندازه پس زمینه را در نشانک ها نگه دارید. برای جزئیات مرجع به background-size در MDN و توضیحات میان بر background در MDN مراجعه کنید.