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

 Решил описать несколько способов масштабирования фона на сайте. Тема эта не новая и способы ее реализации не особо оригинальны, но тем не менее она продолжает быть все еще востребованной.  

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

Я бы назвал его классическим, где для масштабирования  фона используется свойство 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.

 

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

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