05:44
ОбновитьСмайлыУправление мини-чатом
Вы вошли как Гость | Группа "Гости" | RSS

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Скрипты для сайта Ucoz » Скрипты Ucoz » Изменение фона страницы (Изменение фона страницы)
Изменение фона страницы
Админ-2Дата: Среда, 06.04.2011, 03:28 | Сообщение # 1
Рядовой
Группа: Администраторы
Сообщений: 2
[ ]
Offline

Изменение фона страницы посредством позиционированного изображения


Ещё один довольно простой способ зафиксировать и растягивать фон в зависимости от разрешения монитора пользователя, заключается в следующем: - под контент подкладывается изображение, фиксируется в верхнем левом углу и задаётся ему минимальная ширина и высота равная 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="" />

Quote

- Добавляется после контента, перед закрывающим </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;}}

Источник

Форум » Скрипты для сайта Ucoz » Скрипты Ucoz » Изменение фона страницы (Изменение фона страницы)
Страница 1 из 11
Поиск:

Сделать бесплатный сайт с uCoz

www.owi.3dn.ru © Все права защищены! 2010-2011 Сайт оптимизирован под разрешение экрана 1280х1024 и браузеры Mozila Firefox
Загрузка...