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

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

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

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

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



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



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


Комментарии (3)
Оксана Чудина 2011-04-20 в 18:58Спам
Прошу прощения за грамматические ошибки в текcте скоро все исправят smile
2
Гладнев Ярослав 2011-04-22 в 00:45Спам
а демо можно?
4
Виктор Кузьменков 2013-05-21 в 22:16Спам
а чем плох background-size?
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите.