Фон по размеру окна на jQuery

31.03.14 26.01.15 Нет 4175

Плагин масштабирования картинки фона по размеру окна на jQuery. Протестирован в Safari, Crome и Firefox.
Все, что необходимо – выбрать картинку для установки в качестве фона. С использованием плагина эта картинка будет меняться в размерах до заполнения всего окна.

Код плагина (совсем небольшой):

/**
 * jQuery.fullBg
 * Version 1.0
 * Copyright © 2010 c.bavota – http://bavotasan.com
 * Dual licensed under 'MIT' and 'GPL'.
 * Date: 02/23/2010
**/
(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)

К нему требуется совсем короткий CSS:

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

⇥ Для фиксирования фона можно использовать стандартный подход:

.fullBg {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

Для нормальной работы нужно в HTML добавить тег с изображением (с id или class), а также добавить div, в котором будет располагаться контент (без этого плагин правильно работать не будет).

<img src="your-background-image.jpg" alt="" id="background" /> 
<div id="maincontent"> <!-- Your site content goes here --> </div>

Для запуска плагина поместите вниз страницы (перед закрывающим тегом body):

<script type="text/javascript"> $(window).load(function() { $("#background").fullBg(); }); </script>

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

Пример использования:

Между <head></head>:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fullbg.min.js"></script>
<style type="text/css">
.fullBg {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
}

#maincontent {
	position: absolute;
	top: 300px;
	left: 0;
	z-index: 50;
	width: 100%;
	background: #fff;
	opacity: 0.9; 
	filter: alpha(opacity=90);
	}

#box {
	width: 600px;
	margin: auto;
	padding: 0 10px;
	}

h1 { 
	margin-top: 12px;
	font-size: 40px;
	text-align: center;
	line-height: 44px;
	font-weight: normal;
	font-family: Georgia,serif;
	color: #222;
	}

h2 { 
	margin-top: 0;
	font-size: 24px;
	line-height: 28px;
	font-weight: normal;
	font-family: Georgia,serif;
	color: #C52D08;
	}
</style>

Между <body></body>:

<img src="images/bg.jpg" alt="" id="background" />
<div id="maincontent">
    <div id="box">
        <h1>Full Size Background Image jQuery Plugin</h1>
        <h2>Демо</h2>
 Просто измените размер окна и увидете работу плагина в действии. Когда бы размер окна не менялся, фоновое изображение также изменит свой размер. И всегда будет сохранять правильное соотношение сторон.
    </div>
</div>
<script type="text/javascript">
$(window).load(function() {
	$("#background").fullBg();
});
</script>

Источник

Смотреть пример

Скачать исходник Размер: 76,68kB | Изменен: 31.03.14 | Загрузок: 163