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

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

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

  • کل صفحه را با تصویر می خواهیم پر کنیم، بدون هیچ فضای خالی
  • در صورت نیاز باید تصویر با مقیاس صفحه کوچک و بزرگ شود
  • حفظ تناسب تصویر (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;
}

دمو