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

розтягнути фон на веб-сторінці не так-то просто. Тут допоможе маленька хитрість. Спочатку формуються два шари - для картинки і вмісту сторінки. А потім визначається позиціонування кожного з них. Той шар, що з картинкою, розтягується до 100% розмірів сторінки, а лівий верхній кут його призначається нульовою точкою звіту. Після злиття шарів сторінка набуває зовсім іншого вигляду.
Як розтягнути фон
Використовуючи тег, сформуйте два шари - layer1 і layer2. На одному з них, нижньому, буде розташовуватися картинка, на іншому, верхньому, - контент веб-сторінки.
2


Визначте порядок розташування шарів за допомогою стильового атрибуту z-index. Врахуйте, чим більше буде значення зазначеного параметра, тим вище виявиться наявний зараз в наявності шар по відношенню до інших верствам. Задайте абсолютне позиціонування для кожного створюваного шару.
3
Встановіть для шару layer1 розміри, рівні 100% ширини і висоти. Зробіть координати лівого верхнього кута початковими, нульовими. Це допоможе позбутися від горизонтальної смуги прокрутки.
4
Виконайте злиття шарів.

Зверніть увагу

У тезі позначайте тільки ширину картинки, без вказівки її висоти. Інакше зберегти нормальні пропорції зображення буде неможливо, спотворення виявляться неминучими.

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

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


Увага, тільки СЬОГОДНІ!


Оцініть, будь ласка статтю
Всього голосів: 157
Увага, тільки СЬОГОДНІ!