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

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

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

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

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



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



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

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