"Резиновый" фон на jQuery

На сегодняшний день разнообразие мониторов, а точнее их разрешения, настолько велико, что веб дизайнерам очень сложно подобрать фон, который подходил бы под все разрешения. И снова нам на помощи приходит jQuery который создаст "резиновый" фон, который будет меняться в зависимости от размеров экрана браузера.

Сначала добавляем изображение на страницу и назначаем ему id ‘background-image’. При помощи JavaScript, вычисляем размеры экрана пользователя, для того, чтобы в нормальном виде отобразить изображение.

Используя jQuery, мы можем манипулировать размерами изображения посредством правил CSS:

$(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(); }); });

Для того чтобы изображение находилось позади содержания страницы, мы должны его абсолютно позиционировать и выставить наименьший z-index, чем остальная часть нашего контента. Мы так же увидим, что свойство display выставлено в none. Это для тех пользователей, кто отключает JavaScript (не будет изображения фона).

#background-image { position:absolute; top:0; left:0; z-index:-10; overflow: hidden; width: 100%; display:none; }

Вуаля! Наслаждайтесь своим сайтом при любом разрешении монитора.