Як розтягнути фон сайту

Як розтягнути фон сайту

Мова розмітки HTML дозволяє веб-дизайнеру використати в якості фонового малюнка будь-яке зображення. Проте в самій мові недостатньо вбудованих засобів управління фоновими картинками. Тонше налаштування здійснюється за допомогою каскадних таблиць стилів CSS.

 


Інструкція

1. Щоб зробити фон, розтягуваний на усю ширину браузеру, необхідно скористатися параметром z - index в CSS. Він дозволяє задати порядок створюваним елементам. Чим більше значення цього атрибуту, тим вище блок розташовуватиметься на сторінці.

2. Створіть нові документи у форматі html і css(права клавіша миші - "Створити" - "Текстовий файл") і відкрийте їх за допомогою будь-якого текстового редактора.


3. Розташуйте фонову картинку на нижньому шарі. Вона розтягуватиметься залежно від дозволу екрану. Згори буде розташований інший елемент, на якому відображатиметься вміст сторінки. Щоб це здійснити, створіть два блоки <div> . У файлі css напишіть:.1layer { z - index: 1;width: 100% height: 100% position: absolute;}.2layer {Position: absolute;z - index: 2; }Параметр position: absolute дозволяє задати абсолютне позиціонування, тобто шар розміщуватиметься незалежно від інших елементів.

4. Включіть створений CSS- код в HTML- файл за допомогою єднального тега link:<html><head><title>Фон сторінки</title><link rel=stylesheet type=text/css href=файл.css></head>

5. Створіть новий шар. За допомогою тега <img> помістіть на нього картинку. Наприклад:<body><div class=1layer><img src=файл картинки width=100%></div><div class=2layer>Вміст сторінки</div></body></html>Для img задається тільки параметр ширини, оскільки якщо вказати додатково height, в деяких браузерах з'явиться спотворення зображення.

6. Збережіть внесені зміни. Щоб перевірити написаний код, збільште сторінку у вікні браузеру. Фоновий малюнок повинен теж збільшуватися.

 



Надрукувати