Як розтягнути фонову картинку
Можливість розтягувати фонову картинку на всю ширину вікна браузера засобами тільки мови CSS з`явилася з виходом його останньої специфікації - CSS3. На жаль, поки велика кількість веб-серферів використовує браузери ранніх версій, які не розуміють специфікації CSS3. Тому доводиться робити вибір - або використовувати менш зручне, але кросбраузерності рішення, або високотехнологічне, але для обмеженої аудиторії. Розглянемо обидва варіанти.
Вам знадобиться
- Базове знання мов HTML і CSS
Інструкція
1
Перший варіант заснований на більш ранніх специфікаціях мови CSS. Вам потрібно створити таку структуру HTML-коду, в якій будуть присутні два перекриваються шару, розміщених один над іншим. Шари (div) можна розтягувати на ширину екрану і в старій специфікації мови опису каскадних стилів. У нижній з шарів вам потрібно помістити фонову картинку, а в верхньому розміщуватиметься весь контент сторінки. Така структура в тілі документа може виглядати так:
Тут буде вміст сторінки
2
Весь код в зборі може виглядати так:
Тут буде вміст сторінки
Не забудьте замінити ім`я файлу фонового зображення images / fon.jpg.
3
Другий варіант буде використовувати з`явилося в CSS3 властивість background-size. Заодно додайте в визначення стилів аналогічні властивості і раніше використовувалися браузерами Mozilla Firefox, Google Chrome і Opera. Блок опису стилів в цьому варіанті може виглядати так:І тут не забудьте замінити ім`я файлу фонового зображення images / fon.jpg. А в самому тілі документа ніяких спеціальних конструкцій поміщати в цьому варіанті не потрібно.
Статті за темою "Як розтягнути фонову картинку"
Оцініть, будь ласка статтю
