Делаем масштабируемое фоновое изображение на jQuery

В сегодняшней статье поговорим о том, как установить изображение на фон страницы таким образом, чтобы оно изменялось пропорционально размеру окна браузера.

В создании масштабируемого фона нет ничего сложно. Первое, что нужно сделать — добавить на страницу изображение с id=»background-image». Рекомендую поставить его сразу же за открывающим тегом <body>. После этого, используя javascript, будем вычислять размеры окна браузера и соотвественно изменять пропорционально размеры изображения.

$(document).ready(function() {
 
 var bgImage = $('#background-image');		
 
    function resizeImg() {
      var imgwidth = bgImage.width(), // ширина изображения
		   imgheight = bgImage.height(), // высота
		   winwidth = $(window).width(), // ширина окна браузера
		   winheight = $(window).height(), // высота
		   widthratio = winwidth / imgwidth, // отношение ширины окна к ширине картинки
		   heightratio = winheight / imgheight, // отношение высот
		   widthdiff = heightratio * imgwidth, // определяем нужную ширину изображения
		   heightdiff = widthratio * imgheight; // и высоту
 
      if(heightdiff>winheight) {
        bgImage.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImage.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });
      }
 
	 $("#background-image").show();
 
    }
    resizeImg();
    $(window).resize(function() { // привязываем изменение размеров изображения к изменению размеров окна
      resizeImg();
    }); 
 
});

И в завершение немного CSS-кода, для того, чтобы это изображение выглядело как фоновое:

#background-image{
	position:absolute;
	top:0;
	left:0;
	z-index:-10; /* чтобы было под всеми элементами на странице */
	overflow: hidden; /* чтоб не появлялись полосы прокрутки */
           width: 100%;
	display:none; /* скроем изображение, показывать его будем в скрипте */
}

Вот и все, всего в несколько строк кода мы сделали масштабируемое, вписывающееся в разные размеры окна изображение.

Запись опубликована в рубрике JS & jQuery с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">