Форум Сайтостроение Веб-строительство

Вопрос по резиновой верстке

N
На сайте с 14.06.2004
Offline
107
Nicca
487

Как разместить фон при резиновой верстке чтобы при уменьшения размеров экрана фон не обрезался.

Вот что у меня получается:

Страница min-width: 1000px; max-width: 1280px;

Размеры фонового изображения 1280х78px

#head { width:100%; background:url("http://site.com/images/bg_header.jpg") no-repeat; height:78px; }

На разширении экрана 1280 показывается нормально, если уменьшаю до 1024, получается обрезанным правый край. Как сделать чтобы это изображение тянулось?

gif 1.gif
gif 2.gif
aleksakfima
На сайте с 02.05.2007
Offline
375
aleksakfima
#1

Nicca, если основная составляющая фона шапки может быть повторена по горизонтали, то всё достаточно просто. Вырезаете из bg_header.jpg левый и правый край и вырезаете повторяющийся узор из основного фона шапки(если узора нет, то достаточно полоски 1px*78px).

Оформляем стили:

#left_head { width:5px; background:url("/left_header.jpg") no-repeat; height:78px; float:left;}
#right_head { width:5px; background:url("/right_header.jpg") no-repeat; height:78px; float:right;}
#main_head { width:100%; background:url("/main_header.jpg"); background-repeat:repeat-x; height:78px; float:left;}

Примечание: ширина краев зависит от радиуса скругления углов т.е. 5px взято от балды, фактический размер должен соответствовать 1 в 1 ширине вырезанного фрагмента края фона шапки.

Код страницы:

<div id="left_head"></div>
<div id="main_head">
Тут будет содержимое шапки... меню текст и т.п.
</div>
<div id="right_head"></div>

PS: рекомендую посмотреть базовые видео уроки по CSS верстке на DIV-ах, скачать можно на РуТрекер.орг

Файлы сжатие css и Вопрос по грамотному Т.З. Конкурс: доработать дизайн. 1000р

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий