تصویر پس زمینه تمام صفحه - fullpage background html

1395-08-22

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

کل صفحه را با تصویر می خواهیم پر کنیم، بدون هیچ فضای خالی
در صورت نیاز باید تصویر با مقیاس صفحه کوچک و بزرگ شود
حفظ تناسب تصویر (aspect ratio)
تصویر در مرکز صفحه قرار می گیرد
تصویر به خودی خود نبایستی موجب اسکرول شود
با مرورگرهای مختلف بایستی سازگاری داشته باشد
مثل فلش فانتری نیست

روش CSS 3 آسان و عالی

ما م یتوانیم این کار را به لطف ویژگی جدید background-size در CSS3به طور کامل با استفاده از CSS انجام دهیم. ما از عنصر html (به خاطر اینکه حداقل عرض آن به اندازه پنجره مرورگر است از عنصر body بهتر است). ما یک پس زمینه fixed و مرکزی روی آن قرار می دهیم، سپس اندازه پس زمینه آن را با استفاده از background-size تنظیم می کنیم تا کل صفحه را پوشش دهد.


html {
   background: url(images/bg.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

دمو