Резиновый фон и прозрачный фон в IE 6

прозрачный фон

Всем привет. Поскольку периодически поступают вопросы: Как сделать фоновое изображение, чтобы оно растягивалось на всю ширину экрана? Я решил рассказать, как это делается, создание резинового фона для сайта. Плюс к этому в уроке рассмотрена “борьба” с прозрачным png в IE 6.

Прежде чем перейти к рассмотрению фоновых изображений, давайте сначала разберемся с обычными изображениями.

Картинка, тег <img src=”” /> может тянуться. Для этого ей в параметре width надо указать число и поставить символ %.

<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. Понятней будет если представить код:

<div class="head-main">
<div class="head-road">
</div>
</div>

А css код со вставленными фоновыми изображениями выглядит так:

*{
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 ниже:

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('');
</script>
<![endif]-->

И в строке DD_belatedPNG.fix(»); , в скобках просто перечисляем названия классов, в которых используется в качестве фона прозрачный png. То есть для нашего случая конечный код выглядит так:

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.head-road');
</script>
<![endif]-->

Если еще в каких-либо блоках используется прозрачный png в качестве фона, то классы этих блоков указываем через запятую.

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 — Как создать свой сайт. Основы самостоятельного сайтостроения

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Ольга

    Привет, спасибо за урок. Интересное решение и все понятно написанно. А за объяснение как можно бороться с IE6 отдельное спасибо!

  2. elena

    Елена
    22 сентября 2009 года
    12. 54
    Ну что тут скажешь. Очень грамотно написано.

  3. westa

    Ценная статья, недавно сталкивалась с тем что нужно растянуть картинку, но не нашла как. Теперь буду знать, спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree