Възможността за разтягане на фоновото изображение до пълната ширина на прозореца на браузъра с помощта на CSS се появи само с пускането на последната му спецификация - CSS3. За съжаление досега голям брой уеб сърфисти използват ранни браузъри, които не разбират спецификацията CSS3. Следователно трябва да направите избор - или да използвате по-малко удобно, но крос-браузърно решение, или високотехнологично, но за ограничена аудитория. Нека разгледаме и двата варианта.
Необходимо
Основни познания по HTML и CSS
Инструкции
Етап 1
Първата опция се основава на по-ранни спецификации на езика CSS. Трябва да създадете HTML кодова структура, която има два припокриващи се слоя, един над друг. Слоевете (div) могат да бъдат разтегнати до ширината на екрана в спецификацията на езика за описание на стария каскаден стил. В долната част на слоевете трябва да поставите фоновото изображение, а в горната ще поставите цялото съдържание на страницата. Такава структура в тялото на документа може да изглежда така:
Това ще бъде съдържанието на страницата
И описанието на стиловете за тази структура трябва да бъде поставено в заглавната част. Например това:
html, тяло {
марж: 0px;
височина: 100%;
}
#заден план {
позиция: абсолютна;
ширина: 100%;
височина: 100%;
}
#body {
позиция: абсолютна;
ширина: 100%;
височина: 100%;
z-индекс: 2;
}
Тук слоевете с фона на идентификаторите (това е вашето фоново изображение) и тялото (това е слоят за съдържанието на страницата) са настроени на абсолютно позициониране и 100% ширина и височина. Освен това на съдържателния слой се присвоява сериен номер z-index = 2. Той определя "дълбочината" на слоевете - колкото по-голяма е тя, толкова по-далеч от "дъното" се намира този слой. В нашия случай той ще бъде над фоновия слой, който използва z-индекса по подразбиране.
Стъпка 2
Пълният код може да изглежда така:
html, тяло {
марж: 0px;
височина: 100%;
}
#заден план {
позиция: абсолютна;
ширина: 100%;
височина: 100%;
}
#body {
позиция: абсолютна;
ширина: 100%;
височина: 100%;
z-индекс: 2;
}
Това ще бъде съдържанието на страницата
Не забравяйте да замените името на файла на фоновото изображение fon.png.
Стъпка 3
Втората опция ще използва свойството за размер на фона, въведено в CSS3. В същото време добавете подобни свойства към дефинициите на стилове, които преди са били използвани от браузърите Mozilla Firefox, Google Chrome и Opera. Блокът за описание на стила в тази версия може да изглежда така:
html {
фон: url (fon.png) фиксиран център без повторение в центъра;
-webkit-background-size: корица;
-moz-background-size: корица;
-o-background-size: корица;
размер на фона: корица;
}
И тук не забравяйте да замените името на файла на фоновото изображение fon.png. И в тялото на самия документ в тази версия не се изискват специални конструкции.
