Приветствую Вас, Гость! Регистрация RSS

Понедельник, 23.12.2024
Главная » Статьи » Скрипты Ucoz

Ещё один довольно простой способ зафиксировать и растягивать фон в зависимости от разрешения монитора пользователя, заключается в следующем: - под контент подкладывается изображение, фиксируется в верхнем левом углу и задаётся ему минимальная ширина и высота равная 100% - тем самым, сохраняя пропорциональность при ресайзе.

Также, добавляется min-width ширины изображения таким образом, чтобы изображение никогда не будет меньше, своего фактического размера.

Дабы она не находилась на переднем плане, саму картинку и блок-обёртку смещают по z-оси на задний план (z-index:-1).

Также, используется @media screen and (max-width:1024px), которое корректирует положение картинки, если окно обозревателя меньше изображения, используя комбинацию процентной величины левого положения и отрицательного левом поля.

HTML-код:

Code

<img id="imgBg" src="/_content/_ext/img-bg/_st/ff11_3.jpg" alt="" />  


- Добавляется после контента, перед закрывающим /body


CSS-стили:

Code

#imgBg{display:block;position:fixed;top:0;left:0;min-height:100%;min-width:1024px;width:100%;height:auto;z-index:-1;}
@media screen and (max-width:1024px){#imgBg{left:50%;margin-left:-512px;}}  


Источник: http://likbezz.ru/
Категория: Скрипты Ucoz | Добавил: bizon (23.04.2011) W
Просмотров: 1874 | Теги: изображения, изменение, позиционированного, посредством, фона, страницы | Рейтинг: 1.0/7

Новости по теме:
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Гость