ПОЛНОРАЗМЕРНОЕ ФОНОВОЕ ИЗОБРАЖЕНИЕ

ПОЛНОРАЗМЕРНОЕ ФОНОВОЕ ИЗОБРАЖЕНИЕ


Всё что нам понадобится - это изображение, которое будет использоваться в качестве фонового. При изменении окна браузера, будут изменяться и размеры нашего фонового изображения. Плагин проверен в Safari, Chrome, Opera, IE8 и Firefox.

Разметка HTML
Само изображение и контейнер для контента:



jQuery плагин полноразмерного фонового изображения


Демо


Изменяя размер окна браузера вы увидите плагин в действии. Размеры фона подстраиваются под размеры окна браузера.



CSS
Небольшой код CSS
.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
 
#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}


Если хотите сделать положение фона фиксированным, то измените стиль CSS
.fullBg {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}


javascript
Подключаем jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


И скрипт плагина, вот его содержимое:
(function($) {
  $.fn.fullBg = function(){
    var bgImg = $(this);        
 
    function resizeImg() {
      var imgwidth = bgImg.width();
      var imgheight = bgImg.height();
 
      var winwidth = $(window).width();
      var winheight = $(window).height();
 
      var widthratio = winwidth / imgwidth;
      var heightratio = winheight / imgheight;
 
      var widthdiff = heightratio * imgwidth;
      var heightdiff = widthratio * imgheight;
 
      if(heightdiff>winheight) {
        bgImg.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImg.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });        
      }
    } 
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    }); 
  };
})(jQuery)


А вызывается плагин так:
$(window).load(function() {
    $("#background").fullBg();
});

Скачать исходник:
Скачать файл: fullbg.rar [361,35 Kb] (cкачиваний: 7)
0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.