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

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

20.04.201133533

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

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

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



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



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



Сохраните в социальную сеть
Комментарии (3)
Прошу прощения за грамматические ошибки в текcте скоро все исправят smile
2
а демо можно?
4
а чем плох background-size?
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт