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


 

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



Інструкція

  1. Щоб зробити фон, розтягується на всю ширину браузера, необхідно скористатися параметром z-index в CSS. Він дозволяє задати порядок створюваним елементам. Чим більше значення даного атрибуту, тим вище блок буде розташовуватися на сторінці.
  2. Створіть нові документи в форматі html і css (права клавіша миші — «Створити» — «Текстовий файл») і відкрийте їх за допомогою будь-якого текстового редактора.
  3. Розташуйте фонову картинку на нижньому шарі. Вона буде розтягуватися в залежності від дозволу екрану. Зверху буде розташований інший елемент, на якому буде відображатися вміст сторінки. Щоб це здійснити, створіть два блоки
    . У файлі css напишіть:

    .1 layer {z-index: 1;
    width: 100%
    height: 100%
    position: absolute;
    }
    .2 Layer {
    Position: absolute;
    z-index: 2;}

    Параметр position: absolute дозволяє задати абсолютне позиціонування, тобто шар буде розміщуватися незалежно від інших елементів.


  4. Увімкніть створений CSS-код в HTML-файл за допомогою сполучного тега link:


  5. Створіть новий шар. За допомогою тега помістіть на нього картинку. Наприклад:

    Вміст сторінки

    Для img задається тільки параметр ширини, оскільки якщо вказати додатково height, в деяких браузерах з’явиться спотворення зображення.


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

Корисні поради

Щоб не виникало горизонтальної смуги прокрутки при відображенні у браузері, до шару 1layer слід вказати нульові координати лівого і правого верхніх кутів:

padding-left: 0px;
padding-right: 0px;