Войти Регистрация

Растянуть background на весь экран с помощью css, jquery, php


Нашей целью будет реализовать фон (background) сайта, который будет покрывать все рабочее пространство окна браузера. Мы будем делать это с помощью разных техник используя CSS3, чистый CSS, jQuery, PHP.

Растянуть background на css

Давайте определим, что именно мы хотим получить:

Полная заливка окна картинкой, без пробелов.

Растягивание фоновой картинки, насколько это нужно.

Соответствие пропорций картинки.

Картинка должна находиться в центре.

Это должно быть максимально кроссбраузерно.

И без всяких махинаций с flash.

CSS3 метод

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

Кроссбраузерность:

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+ (Opera 9.5 поддерживает background-size но не поддерживает ключевых слов)

Firefox 3.6+

Также есть вариант решения для IE, только необходимо тестировать. Некоторые вебмастера говорят, что могут возникнуть проблемы из ссылками и скроллингом.

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

Растянуть background на чистом CSS

Сделать background на весь экран с помощью чистого CSS кода, можно двумя методами. Не исключение что существуют и другие.

1 – Метод

Здесь мы будем использовать элемент img, который будет растянут на все окно, и будет выглядеть одинаково во всех браузерах. Мы установим min-height, который будет заполнять окно браузера по вертикали. Также установим width на 100%, который будет заполнять окно по горизонтали. Мы также установим min-width картинки, таким образом, фон никогда не будет меньше, нежели мы установим.

Особо хитрая часть кода, это использование медиа запроса, для предотвращения бага, когда окно браузера будет меньше, нежели картинка фона. А также, комбинированное использование отступа с процентным left. Это позволяет держать background в центре, несмотря ни на что.

Вот 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

IE 6: По крайней мере background остается фиксированным

IE 7/8: Множество работ не центрируются на малых размерах, но заполняет экран лучшим образом

IE 9: Работает

2 – Метод

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

<img src="images/bg.jpg" id="bg" alt="">

#bg {
        position:fixed;
        top:0;
        left:0; 

        /* Preserve aspet ratio */
        min-width:100%;
        min-height:100%;
}

Хотя, этот код не центрирует background image. Поэтому, сейчас мы это исправим… Мы можем фиксировать картинку с помощью взятия ее в div.

<div id="bg">
        <img src="images/bg.jpg" alt="">
</div>

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        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 отображают одинаково (плохо позиционируют, не пойму почему)

Растянуть background с помощью jQuery

Эта идея появилась немного ранее (как альтернатива CSS методу). Если мы будем знать пропорции и размер картинки, мы сможем растянуть background на CSS. Если картинка меньше окна браузера, мы изменим width на 100% для картинки. Если больше, мы можем установить только height 100% и знать, что картинка заполнит все как по ширине, так и по высоте.

Мы можем получить доступ к нужным данным с помощью JavaScript. Как и все, я использую фреймверк jQuery.

<img src="images/bg.jpg" id="bg" alt="">

#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+

И все другие популярные браузеры

Растягиваем background с помощью PHP

Собственно, PHP мы можем использовать для одной цели: обработки изображения с помощью GD библиотеки. Ранее я рассказывал о том, как сделать скрипт превью картинок. В этом случае его можно использовать для изменения размера изображения на лету. Но возникает проблема, изображение будет генерироваться при каждом обращении к сайту. Для большого проекта это слишком ресурсоемко. Лучше будет сделать готовые заготовки изображений, соответственно самым популярным разрешениям экранов (1024 x 1280, 1280 x 800…), используя фотошоп это не сложно. В случае, если разрешение экрана будет другим, это единичные случаи, мы подключим скрипт автоматического изменения размера. Он подключается следующим образом:

$(function() {
  h = $(window).height();
  w = $(window).width();
  $(body).style('background','url(phpthumb.php?src=bg.jpg&w='+w+'&h='+h);
});

Наслаждайтесь!

Это все известные мне способы, как растянуть background на весь экран. Если вы делаете это иначе, будьте добры опишите это в комментариях. Буду рад узнать о новых вариантах растягивания background с помощью css и других техник. Творческих вам успехов!


Дальше: Счетчик скачиваний файла на PHP & MySQL


Дискуссия по теме    16 Комментариев
Добавить комментарий
iiigoryok 17.01.2016 в 21:43
Мне помогла только блокировка скролинга position:fixed;
Руслан 09.06.2015 в 01:08
Помогло, спс!
Руслан 06.05.2015 в 19:48
Спасибо, полезно!
Геннадий 26.04.2015 в 08:06
Спасибо большое.
Андрей 10.02.2015 в 23:26
Спасибо большое, помог!)
Андрей 05.02.2015 в 11:18
А у меня такой вопрос. Как растянуть фон( #006dcc) меню во весь экран? Пробовал через фаербуг не получилось. Сайт http://газтехника56.рф/ Спасибо.
Антон 11.01.2015 в 04:43
Автору 100500 в карму! Выручил!
Роман Влах 26.11.2014 в 17:32
В CSS вариант использую. Поставил задний фон, но он заканичивается и снова начинается новая такая же картинка. Теперь растяну на всю высоту контента одну картинку без повторений.
vlad 13.10.2014 в 06:03
нигде не мог найти - как сам браузер растянуть на экране ноутбука. С двух сторон черный фон по 5 см... это и хром и ИЭ... картинка сайтов не умещается, особенно плохо с текстом - приходится пользоваться нижней кареткой. Вопрос - можно ли растянуть браузеры на ширину экрана?
Павел 12.10.2014 в 19:17
Спасибо! Вы мне помогли! Я очень долго не мог решить эту проблему!
Артём 22.08.2014 в 07:53
Использовал метод чистого CSS. Всё работает :) Благодарю!
Данила 18.07.2014 в 21:38
Спасибо, реально здорово!
Виолетта 08.02.2014 в 15:48
Спасибо огромное, вы мне очень помогли)
miha 08.06.2013 в 02:32
z-index: -1; в первый метод
Владимир 07.11.2012 в 16:57
Источник - http://css-tricks.com/perfect-full-page-background-image/
ZorGG 29.06.2012 в 01:12
ай-ай-ай, интресные варианты с CSS и CSS 3, обязательно попробую, спасибо =)
Добавить комментарий
Просмотров: 137876