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

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

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

Вам знадобиться

З’єднання з інтернетом, веб-ресурс

Інструкція

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

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

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

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

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

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