Гумовий фон і прозорий фон в IE 6

19

Всім привіт. Оскільки періодично надходять запитання: Як зробити фонове зображення, щоб воно розтягувалося на всю ширину екрану? Я вирішив розповісти, як це робиться, створення гумового фону для сайту. Плюс до цього в уроці розглянуто «боротьба» з прозорим png в IE 6.

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

Картинка, тег Гумовий фон і прозорий фон в IE 6 може тягнутися. Для цього їй в параметрі width треба вказати число і поставити символ»%».

Гумовий фон і прозорий фон в IE 6

Цей запис означає, що картинка займе 70% ширини елемента — батька (елемента, в якому знаходиться картинка). Тобто якщо помістити зображення в контейнер , то воно завжди буде займати 70% від ширини вікна браузера, а значить, буде змінювати свій розмір, якщо ми будемо змінювати розмір вікна браузера.

Краще вказувати один параметр width, щоб ширина і висота зображення змінювалися пропорційно. Можна звичайно поставити фіксовану висоту, але тоді зображення буде виглядати не так як в оригіналі.

Що стосується фону, то тут справи йдуть трохи інакше. Не можна вказати фонового зображення, щоб воно зайняло 100% ширини елемента, для якого воно призначено в якості фонового. Для фону це робиться трохи інакше. Щоб розібратися розглянемо приклад.

Гумовий фон і прозорий фон в IE 6

Коли я працював над цим сайтом, і основним завданням було те, щоб він розтягувався на весь екран, незалежно від ширини. В верхній частині сайту (head) ми бачимо зображення, яке очевидно має бути фоном і розтягуватися на всю ширину вікна браузера.

Якщо немає свого прикладу для тренування, можна завантажити безкоштовно psd — макет частини head даного сайту тут.

Тепер звернемося до макету.

Якщо в макеті відключити всі верстви частини head, то можна побачити, що на самому нижньому шарі лежить картинка, яка повторюється.

Гумовий фон і прозорий фон в IE 6

У загальному-те, що виділено червоним, то і повторюється. Значить, нам потрібно вирізати таку картинку і поставити її фоном для блоку частини head. Це картинка буде повторюватися.

Тепер відключаємо всі шари і навіть фоновий і вмикаємо шар з дорогою. Виріжемо картинку з дорогою, він буде другим фоновим зображенням для блоку, який буде лежати всередині основного блоку частини head. Це зображення повторюватися не буде. Воно буде завжди зліва.

Гумовий фон і прозорий фон в IE 6

Звернемо увагу, що фон в картинки прозорий, і зберігати її потрібно в форматі png-24. І повинна стояти галочка transparency.

Гумовий фон і прозорий фон в IE 6

Зображення, яке вирізали першим, визначаємо як фонове для div з класом head-main, а друге (з дорогою) кладемо фоном у div з класом head-road, що в свою чергу кладемо у div з класом head-main. Зрозуміліше буде якщо уявити код:

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

*{
margin:0; padding:0;
}
.head-main{
background:url(content-1/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

Все було б нічого, але IE 6 не підтримує прозорий png. І в IE 6 ми побачимо:

Гумовий фон і прозорий фон в IE 6

Прозорості в IE 6 замінилися сірим кольором.

Що б це виправити, познайомлю вас з методом, який запропонував Drew Diller.

Суть його полягає в тому, що ми для IE 6 підключаємо файл DD_belatedPNG.js (завантажити його можна тут), потім викликаємо функцію DD_belatedPNG.fix, в якості аргументів перераховуємо класи елементів, в яких використовується прозорий png.

Код того, як це підключається для IE 6 нижче:

DD_belatedPNG.fix(«);

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

DD_belatedPNG.fix(‘.head-road’);

Якщо ще якихось блоках використовується прозорий png в якості фону, то класи цих блоків вказуємо через кому.

DD_belatedPNG.fix(‘.head-road .head-road2, .head-road3’);

Не загострив увагу на тому де цей код розміщувати. Розміщується він між тегами і .

Тепер і в IE 6 все виглядає так, як і повинно бути. І далі можна розміщувати інші позначки (наприклад, приймати за меню) всередині div з класом head-road таким чином вибудовуючи шапку сайту.

Ось власне і все. Видно, що фон тут не тягнеться. Просто щось повторюється, що залишається ліворуч стояти на своєму місці, тому все виглядає добре при будь-якому розмірі вікна браузера.

У даному уроці ми познайомилися, як працювати з нестандартними ситуаціями для фону. Плюс розглянули (як я думаю) унікальний метод боротьби з прозорим png в IE 6.

Є деякі інші методи, але цей самий простий у застосуванні, і для цього методу працюють властивості фону, такі як background-position і background-repeat. В інших методах ці властивості не працюють.

Сподіваюся, що інформація по створенню гумового фону та прозорості png-файлів IE 6, виявилася корисною. З вами був Андрій.

E-mail:[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування