Изменение фона страницы посредством позиционированного изображения - Скрипты Ucoz - Скрипты для 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/
Mне нравится +7 Категория: Скрипты Ucoz \| Добавил: bizon (23.04.2011) W
Просмотров: 1864 \| Теги: изображения, изменение, позиционированного, посредством, фона, страницы \| Рейтинг: 1.0/7