در css، یکی از روش‌های تغییر اندازه‌ی تصویر زمینه متناسب با سایز صفحه نمایش استفاده از خاصیت background-size است.

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

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


body {
    background: url('http://bayanbox.ir/view/3671047358495111419/the-eiffel-tower-by-gemini-soul-d6s3rug.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

همچنین مثال بالا را بصورت زنده میتوانید در فیدلی که برای این پست ساخته شده امتحان کنید. فیدل امتحان این ویژگی...

همچنین گزینه های بیشتری هم برای background-size در دسترس است که میتوانید در MDN بیشتر مطالعه کنید. بیشتر ...