Як розтягнути фонову картинку. Як розтягнути робочий стіл.

Можливість розтягувати фонову картинку на всю ширину вікна браузера засобами тільки мови CSS з'явилася з виходом його останньою специфікації - CSS3. На жаль, поки велика кількість веб-серферів використовує браузери ранніх версій, які не розуміють специфікації CSS3. Тому доводиться робити вибір - або використовувати менш зручне, але кросбраузерності рішення, або високотехнологічне, але для обмеженої аудиторії. Розглянемо обидва варіанти.
Вам знадобиться
  • Базове знання мов HTML і CSS
Інструкція
1
Перший варіант заснований на більш ранніх специфікаціях мови CSS. Вам потрібно створити таку структуру HTML-коду, в якій будуть присутні два перекриваються шару, розміщених один над іншим. Шари (div) можна розтягувати на ширину екрану і в старій специфікації мови опису каскадних стилів. В нижній з шарів вам потрібно помістити фонову картинку , а в верхньому розміщуватиметься весь контент сторінки. Така структура в тілі документа може виглядати так:
Тут буде вміст страніциА в заголовну частину треба помістити опис стилів для цієї структури. Наприклад, таке: Тут верствам з ідентифікаторами background (це у вас фонова картинка) і body (це шар для контенту сторінки) задано абсолютне позиціонування і 100% ширина і висота. Крім того, прошарку контенту заданий порядковий номер z-index = 2. Він визначає «глибину» шарів - чим він більший, тим далі від «дна» розташовується цей Лейер. У нашому випадку він буде вище шару background, який використовує значення z-index, задане за замовчуванням.
2
Весь код в зборі може виглядати так:

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