Фоновое изображение на всю страницу

 В небольшой статейке решил описать несколько способов масштабирования  фона на сайте.  Тема не новая и способы не особо оригинальны, но тем не менее востребовано.  

Способ первый.

Я бы назвал классический,  где для масштабирования  фона используем свойство background-size со значением 100%.  Этот способ обладает огромным минусом. При увеличении размера окна браузера фон  начнёт расширяться, что приводит к ухудшению фонового изображения.

 .bg {
     background: url(/img/blok.png) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   } 

Способ второй.

Использование с свойство background-size но со значением  cover.  Это значение позволяет сохранить пропорции фона. 

 .bg{
    background-attachment: scroll;
    background-image: url(/img/blok.png);
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover; /* Safari 3.1+ и Chrome 4.0+ */
    -moz-background-size: cover;   /* Firefox 4.0+ */
    background-size: cover;        /* Современные браузеры */
    -o-background-size: cover;      /* Opera 10.53+ */
 }

Но к сожалению  свойство  background-size,  не поддерживается браузером IE8 и, даже, IE9. Тут нужны костыли. Первым делом нужно добавить свойство

 .bg{
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/blok.gif', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/blok.gif', sizingMethod='scale')";
 }

Где путь к фоновому изображению blok.gif. Таким способом можно побороть IE.

 

Оставить комментарий

Похожие материалы