Всім привіт. Оскільки періодично надходять запитання: Як зробити фонове зображення, щоб воно розтягувалося на всю ширину екрану? Я вирішив розповісти, як це робиться, створення гумового фону для сайту. Плюс до цього в уроці розглянуто “боротьба” з прозорим png в IE 6.
Перш ніж перейти до розгляду фонових зображень, давайте спочатку розберемося з звичайними зображеннями.
Картинка, тег 
може тягнутися. Для цього їй в параметрі width треба вказати число і поставити символ”%”.
Цей запис означає, що картинка займе 70% ширини елемента — батька (елемента, в якому знаходиться картинка). Тобто якщо помістити зображення в контейнер , то воно завжди буде займати 70% від ширини вікна браузера, а значить, буде змінювати свій розмір, якщо ми будемо змінювати розмір вікна браузера.
Краще вказувати один параметр width, щоб ширина і висота зображення змінювалися пропорційно. Можна звичайно поставити фіксовану висоту, але тоді зображення буде виглядати не так як в оригіналі.
Що стосується фону, то тут справи йдуть трохи інакше. Не можна вказати фонового зображення, щоб воно зайняло 100% ширини елемента, для якого воно призначено в якості фонового. Для фону це робиться трохи інакше. Щоб розібратися розглянемо приклад.
Коли я працював над цим сайтом, і основним завданням було те, щоб він розтягувався на весь екран, незалежно від ширини. В верхній частині сайту (head) ми бачимо зображення, яке очевидно має бути фоном і розтягуватися на всю ширину вікна браузера.
Якщо немає свого прикладу для тренування, можна завантажити безкоштовно psd — макет частини head даного сайту тут.
Тепер звернемося до макету.
Якщо в макеті відключити всі верстви частини head, то можна побачити, що на самому нижньому шарі лежить картинка, яка повторюється.
У загальному-те, що виділено червоним, то і повторюється. Значить, нам потрібно вирізати таку картинку і поставити її фоном для блоку частини head. Це картинка буде повторюватися.
Тепер відключаємо всі шари і навіть фоновий і вмикаємо шар з дорогою. Виріжемо картинку з дорогою, він буде другим фоновим зображенням для блоку, який буде лежати всередині основного блоку частини head. Це зображення повторюватися не буде. Воно буде завжди зліва.
Звернемо увагу, що фон в картинки прозорий, і зберігати її потрібно в форматі png-24. І повинна стояти галочка transparency.
Зображення, яке вирізали першим, визначаємо як фонове для 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 не підтримує прозорий png. І в 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 — Як створити свій сайт. Основи самостійного сайтобудування
