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

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

Можливість розтягувати фонову картинку на всю ширину вікна браузера засобами тільки мови CSS з’явилася з виходом його останньої специфікації — CSS3. На жаль, поки велика кількість веб-серферів використовує браузери ранніх версій, які не розуміють специфікації CSS3. Тому доводиться робити вибір — або використовувати менш зручне, але кросбраузерність рішення, або високотехнологічне, але для обмеженої аудиторії. Розглянемо обидва варіанти.

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

Базове знання мов HTML і CSS

Інструкція

  1. Перший варіант заснований на більш ранніх специфікаціях мови CSS. Вам потрібно створити таку структуру HTML-коду, в якій будуть присутні два перекриваються шару, розміщених один над іншим. Шари (div) можна розтягувати на ширину екрану і в старій специфікації мови опису каскадних стилів. У нижній з шарів вам потрібно помістити фонову картинку, а у верхньому розміщуватиметься весь контент сторінки. Така структура в тілі документа може виглядати так:

    <img id=»background» src=»fon.png» />

    <div id=»body»>

     Тут буде вміст сторінки

    </ Div>

    А в заголовну частину треба помістити опис стилів для цієї структури. Наприклад, таке:

    <style type=»text/css»>

     html, body {

      margin: 0px;

      height: 100%;

     }

     # Background {

      position: absolute;

      width: 100%;

      height: 100%;

     }

     # Body {

      position: absolute;

      width: 100%;

      height: 100%;

      z-index: 2;

     }

    </ Style>

    Тут верствам з ідентифікаторами background (це у вас фонова картинка) і body (це шар для контенту сторінки) задано абсолютне позиціонування і 100% ширина і висота. Крім того, шару контенту заданий порядковий номер z-index = 2. Він визначає «глибину» шарів — чим він більший, тим далі від «дна» розташовується цей лейер. У нашому випадку він буде вище шару background, який використовує значення z-index, задане за замовчуванням.
  2. Весь код в зборі може виглядати так:

    <html>

    <head>

    <style type=»text/css»>

     html, body {

      margin: 0px;

      height: 100%;

     }

     # Background {

      position: absolute;

      width: 100%;

      height: 100%;

     }

     # Body {

      position: absolute;

      width: 100%;

      height: 100%;

      z-index: 2;

     }

    </ Style>

    </ Head>

    <body>

     <img id=»background» src=»fon.png» />

     <div id=»body»>

      Тут буде вміст сторінки

     </ Div>

    </ Body>

    </ Html>

    Не забудьте замінити ім’я файлу фонового зображення fon.png.
  3. Другий варіант буде використовувати з’явилося в CSS3 властивість background-size. Заодно додайте в визначення стилів аналогічні властивості і раніше використовувалися браузерами Mozilla Firefox, Google Chrome і Opera. Блок опису стилів в цьому варіанті може виглядати так:

    <style type=»text/css»>

     html {

      background: url (fon.png) no-repeat center center fixed;

      -Webkit-background-size: cover;

      -Moz-background-size: cover;

      -O-background-size: cover;

      background-size: cover;

     }

    </ Style>

    І тут не забудьте замінити ім’я файлу фонового зображення fon.png. А в самому тілі документа ніяких спеціальних конструкцій поміщати в цьому варіанті не потрібно.