Всем привет. Поскольку периодически поступают вопросы: Как сделать фоновое изображение, чтобы оно растягивалось на всю ширину экрана? Я решил рассказать, как это делается, создание резинового фона для сайта. Плюс к этому в уроке рассмотрена “борьба” с прозрачным png в IE 6.
Прежде чем перейти к рассмотрению фоновых изображений, давайте сначала разберемся с обычными изображениями.
Картинка, тег <img src=”” /> может тянуться. Для этого ей в параметре width надо указать число и поставить символ %.
|
1 |
<img src="images/bg-head.jpg" width="70%" alt="резиновое изображение" /> |
Эта запись означает, что картинка займет 70% ширины элемента — родителя (того элемента, в котором находится картинка). То есть если поместить изображение в контейнер <body> </body>, то оно всегда будет занимать 70% от ширины окна браузера, а значит, будет менять свой размер, если мы будем изменять размер окна браузера.
Лучше указывать один параметр width, чтобы ширина и высота изображения изменялись пропорционально. Можно конечно задать и фиксированную высоту, но тогда изображение будет выглядеть не так как в оригинале.
Что касается фона, то здесь дела обстоят несколько иначе. Нельзя указать фоновому изображению, чтобы оно заняло 100% ширины элемента, для которого оно назначено в качестве фонового. Для фона это делается несколько иначе. Чтобы разобраться рассмотрим пример.
Когда-то я трудился над этим сайтом, и основной задачей было то, чтобы он растягивался на весь экран, независимо от ширины. В верхней части сайта (head) мы видим изображение, которое очевидно должно быть фоном и растягиваться на всю ширину окна браузера.
Если нет своего примера для тренировки, можно скачать psd — макет части head данного сайта здесь.
Теперь обратимся к макету.
Если в макете отключить все слои части head, то можно увидеть, что на самом нижнем слое лежит картинка, которая повторяется.
В общем-то, что выделено красным, то и повторяется. Значит, нам нужно вырезать такую картинку и поставить ее фоном для блока части head. Это картинка будет повторяться.
Теперь отключаем все слои и даже фоновый и включаем слой с дорогой. Вырежем картинку с дорогой, он будет вторым фоновым изображением для блока, который будет лежать внутри основного блока части head. Это изображение повторяться не будет. Оно будет всегда слева.
Обратим внимание, что фон у картинки прозрачный, и сохранять ее нужно в формате png-24. И должна стоять галочка transparency.
Изображение, которое вырезали первым, определяем как фоновое для div с классом head-main, а второе (с дорогой) кладем фоном в div с классом head-road, который в свою очередь кладем в div с классом head-main. Понятней будет если представить код:
|
1 2 3 4 |
<div class="head-main"> <div class="head-road"> </div> </div> |
А css код со вставленными фоновыми изображениями выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 |
*{ margin:0; padding:0; } .head-main{ background:url(images/bg-head.jpg) left top repeat-x; height:180px; } .head-road{ background:url(images/road-head.png) left top no-repeat; height:180px; } |
В браузере мы увидим:
Все было бы ничего, но IE 6 не поддерживает прозрачный png. И в IE 6 мы увидим:
Прозрачности в IE 6 заменились серым цветом.
Что бы это исправить, познакомлю вас с методом, который предложил Drew Diller.
Суть его заключается в том, что мы для IE 6 подключаем файл DD_belatedPNG.js (скачать его можно тут), затем вызываем функцию DD_belatedPNG.fix, в качестве аргументов перечисляем классы элементов, в которых используется прозрачный png.
Код того, как это подключается для IE 6 ниже:
|
1 2 3 4 5 6 |
<!--[if IE 6]> <script src="js/DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix(''); </script> <![endif]--> |
И в строке DD_belatedPNG.fix(»); , в скобках просто перечисляем названия классов, в которых используется в качестве фона прозрачный png. То есть для нашего случая конечный код выглядит так:
|
1 2 3 4 5 6 |
<!--[if IE 6]> <script src="js/DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('.head-road'); </script> <![endif]--> |
Если еще в каких-либо блоках используется прозрачный png в качестве фона, то классы этих блоков указываем через запятую.
|
1 |
DD_belatedPNG.fix('.head-road, .head-road2, .head-road3'); |
Не заострил внимание на том где этот код размещать. Размещается он между тегами <head> и </head>.
Теперь и в IE 6 все выглядит так, как и должно быть. И далее можно размещать другие теги (например, принимать за меню) внутри div с классом head-road таким образом выстраивая шапку сайта.
Вот собственно и все. Видно, что фон здесь не тянется. Просто что-то повторяется, что-то остается слева стоять на своем месте, поэтому все выглядит хорошо при любом размере окна браузера.
В данном уроке мы познакомились, как работать с нестандартными ситуациями для фона. Плюс рассмотрели (как я думаю) уникальный метод борьбы с прозрачным png в IE 6.
Есть некоторые другие методы, но этот самый простой в применении, и для этого метода работают свойства фона, такие как background-position и background-repeat. В остальных методах эти свойства не работают.
Надеюсь, информация по созданию резинового фона и прозрачности png-файлов в IE 6, оказалась полезной. С вами был Андрей.
Автор: Андрей Бернацкий.
E-mail:contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
Комментарии (3)