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

Как сделать фон на всю ширину страницы. Продолжение
Продолжаем рассматривать варианты, как сделать фон на все окно браузера.

Начало

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

Другой достаточно простой способ — поместить изображение на страницу в фиксированную позицию (левый верхний угол), и задав минимальную ширину и высоту 100%

html-код:

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

CSS:

#bg {        position:fixed;        top:0;        left:0; 
        /* Preserve aspet ratio */        min-width:100%;        min-height:100%;}
Однако, такой вариант не отцентрирует наше фоновое изображение.
но эта проблема легко решается. Мы обернем наше изображение в div. Этот div мы сделаем в два раза больше окна браузера. А затем поместим в него наше изображение по размеру браузера.

html-код:

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

CSS:

#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
  • IE8+
  • Opera и IE в некоторых случаях не правильно позиционируют фон.

Демо

Метод jQuery

Идея этого метода достаточно проста. Изначально для изображения мы вычисляем соотношение сторон, которое может быть меньше или больше соотношения сторон окна браузера. Если соотношение меньше, то мы устанавливаем ширину в 100%, если больше — то задаем высоту — 100%.Для этого мы используем Ява скрипт библиотеку jQuery

html-код:

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

CSS:

#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+
  • Работает в большинстве существующих браузеров

Демо

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