Категория > Вёрстка > Фон для сайта с картинкой на весь экран (background-size) - «Верстка»

Фон для сайта с картинкой на весь экран (background-size) - «Верстка»


18-03-2016, 16:25. Автор: Дмитрий

Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то новые фишки и нюансы для сайтов. Одним из подобных направлений можно назвать использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал как сделать большой фон для сайта через CSS – изображение помещалось в шапку блога и плавно "переходило” в основной фоновый цвет веб-страницы.  Размещение на фоне большой масштабируемой картинки – это что-то новое и более сложное занятие, решение которого нашел в этой статье.


 

 


Цель данного урока разместить на сайте фоновую картинку, которая бы постоянно закрывала весь фон окна браузера. Что же конкретно нужно сделать:



  • заполнить всю страницу одним изображением без пробелов;

  • изменение размеров картинки при необходимости (уменьшении окна браузера);

  • сохранение пропорций изображения;

  • расположение изображения в центре страницы;

  • отсутствие полос прокрутки на странице;

  • кросс-браузерное решение, подходящее для разных браузеров;

  • реализация без всяких сторонних технологий типа flash.


  • Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.


    Замечательное, простое и прогрессивное решение с помощью CSS3


    Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.



    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;
    }


    Решение поддерживают почти все браузеры популярные в сети:



  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

  • Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)

  • Chrome Whatever+

  • IE 9+

  • Safari 3+


  • Некий Goltzman нашел решение, которое позволяет работать хаку в IE



    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";


    Но внимание!!!  при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.


    CSS-хак номер 1


    Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент , который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.


    Дальше в хаке используется опция @media для проверки является ли окно браузера меньшим чем изображение и с помощью процентного значения left и свойства margin-left выравниваем картинку по центру.



    thumb.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
    }
    @media screen and (max-width: 1024px) { /* Specific to this particular image */
    thumb.bg {
    left: 50%;
    margin-left: -512px;
    /* 50% */
    }
    }


    Работает в любых версиях качественных браузеров – Safari / Opera /  Firefox и Chrome. Для IE как всегда есть свои нюансы:



  • IE 9 – работает;

  • IE 7/8 – чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;

  • IE 6 – можно настроить, но кому вообще нужен этот браузер.


  • CSS-хак вариант 2


    Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и  min-height значение 100% сохраняя пропорции.



    	


    #bg {
    position:fixed;
    top:0;
    left:0;
    /* Preserve aspet ratio */
    min-width:100%;
    min-height:100%;
    }


    Однако это не позволяет центрировать картинку, что, в принципе, хотелось бы сделать. Поэтому добавляем внешний для изображения DIV. Он делается в два раза большим, чем размер окна браузера, после чего картинка будет сохранять соотношения сторон, закрывать все окно браузера и при этом быть в его центре.







    #bg {
    position:fixed;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    }
    #bg thumb {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    min-width:50%;
    min-height:50%;
    }


    Хак работает в:



  • Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)

  • IE 8+

  • Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.


  • Метод с jQuery


    Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (thumb используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше – можно указать только height = 100% для заполнения всего окна.


    Доступ ко всем данным идет через javascript, коды используются следующие:



    	


    #bg { position: fixed; top: 0; left: 0; }
    .bgwidth { width: 100%; }
    .bgheight { height: 100%; }

    $(window).load(function() {
    var theWindow
    = $(window),
    $bg
    = $("#bg"),
    aspectRatio
    = $bg.width() / $bg.height();
    function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
    $bg
    .removeClass()
    .addClass('bgheight');
    } else {
    $bg
    .removeClass()
    .addClass('bgwidth');
    }
    }
    theWindow.resize(function() {
    resizeBg();
    }).trigger("resize");
    });


    По моему, центрирование в этом случае не производится (насколько я понял), но его можно сделать. Поддерживается большинство десктопных браузеров, в том числе IE7+. Напоследок автор статьи про хаки подготовил набор файлов примеров, в которых это все реализована – скачать можно здесь. В комментариях к статье-оригиналу также содержится некоторая информация и обсуждение, хотя большинство важных деталей автор добавлял в виде апрейтов к посту и у меня он также переведены и указаны. Конечно, разобраться во всем этом помогут и примеры. В целом, если бы не постоянные "приколы” от IE7 все упомянутые хаки были бы идеальными.


    P.S. Бзаузеры – основной инструмент для работы пользователя в интернете, а лучшие firefox плагины помогают сделать ее максимально удобной, быстрой за счет новых функций и возможностей.

    Хотите купить книгу? – не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть – выбрать, оплатить и оформить доставку на дом.


    Перейти обратно к новости