Как сделать фон на всю ширину страницы

Как сделать фон на всю ширину страницыЦель этого урока создать фон — изображение, которое бы при любых условиях покрывало все окно браузера. При этом нам необходимо, чтобы  данное решение удовлетворяло следующим требованиям:1. Изображение должно покрывать страницу полностью, не оставляя пустых мест2. Размер изображения должно автоматически подгоняться под любое разрешение3. При изменении размера пропорции должны сохраняться4. Изображение должно быть отцентрировано на странице5. Изображение не должно прокручиваться6. Решение должно быть максимально кросс-браузерное

Красивый, легкий и прогрессивный способ с помощью CSS3

Эта проблема очень просто и четко решается с помощью свойства background-size . Мы используем его для элемента html. Мы зафиксируем фон (fixed) и отцентрируем по горизонтали и вертикали (center center). А с помощью свойства CSS3 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;
}

Это работает в

  • safari 3+
  • Chrome во всех версиях
  • IE9+
  • Opera 10+ (в Опере 9.5 свойство background-size тоже поддерживается, но не поддерживается cover )
  • Firefox 3.6+ 

Демо

Технология CSS #1

В этом варианте мы используем элемент <img> , размер которого можно менять в любом браузере. Мы установим min-height , чтобы заполнить окно браузера по вертикали, установим width 100% , чтобы заполнить окно браузера по горизонтали. А также мы установим min-width , чтобы ширина изображения никогда не становилась меньше заданной величины.
Добавим media Запрос, чтобы проверить: если окно браузера меньше, чем картинка, то сместим ее для отображения по центру.Вот код CSS:
img.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 */        img.bg {                left: 50%;                margin-left: -512px;   /* 50% */        }}
Это работает в

  • В любой версии браузеров: Safari/Chrome/Opera/Firefox
  • IE6: возможны проблемы, но они поправимы в каждом конкретном случае
  • IE 7/8: хорошо заполняет весь экран, но возможны проблемы с центрированием фона
  • IE9: работает

Демо
Продолжение

Комментарии на Facebook