Back to Top


1395/08/22 - 16:56

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

در بسیاری از مواقع نیاز به یک تصویر پس زمینه ثابت و تمام صفحه داریم که با جا به جایی و اسکرول صفحه در جای خود باقی بمانند.

کلمات کلیدی

صفحهپس زمینهCSSHTMLbackground

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

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

روش 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;
}

دمو