Можливість розтягувати фонову картинку на всю ширину вікна браузера засобами тільки мови 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" "> Здесь будет содержимое страницы &l
3. Другий варіант буде використовувати властивість background-size, що з 'явилася в CSS3. Заодно додайте до визначення стилів аналогічні властивості і раніше використовувалися браузерами 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. А в самому тілі документа ніяких спеціальних конструкцій поміщати в цьому варіанті не потрібно.