Możliwość rozciągnięcia obrazu tła do pełnej szerokości okna przeglądarki za pomocą CSS pojawiła się dopiero wraz z wydaniem jej najnowszej specyfikacji - CSS3. Niestety, jak dotąd duża liczba internautów korzysta z wczesnych przeglądarek, które nie rozumieją specyfikacji CSS3. Dlatego musisz dokonać wyboru - albo skorzystaj z mniej wygodnego, ale dostępnego w różnych przeglądarkach rozwiązania, albo skorzystaj z zaawansowanej technologii, ale dla ograniczonej grupy odbiorców. Rozważmy obie opcje.
Niezbędny
Podstawowa znajomość HTML i CSS
Instrukcje
Krok 1
Pierwsza opcja jest oparta na wcześniejszych specyfikacjach języka CSS. Musisz utworzyć strukturę kodu HTML, która ma dwie nakładające się warstwy, jedna nad drugą. Warstwy (div) można rozciągnąć do szerokości ekranu w starej specyfikacji języka opisu stylu kaskadowego. Na dole warstw musisz umieścić obraz tła, a na górze całą zawartość strony. Taka struktura w treści dokumentu może wyglądać tak:
To będzie treść strony
A opis stylów dla tej struktury należy umieścić w części nagłówkowej. Na przykład to:
html, treść {
margines: 0px;
wzrost: 100%;
}
#tło {
pozycja: bezwzględna;
szerokość: 100%;
wzrost: 100%;
}
#ciało {
pozycja: bezwzględna;
szerokość: 100%;
wzrost: 100%;
indeks z: 2;
}
Tutaj warstwy z tłem identyfikatorów (to jest obraz tła) i treścią (jest to warstwa zawartości strony) są ustawione na pozycjonowanie bezwzględne i 100% szerokości i wysokości. Dodatkowo warstwie treści przypisywany jest numer seryjny z-index = 2. Określa on „głębokość” warstw – im większa, tym dalej od „dna” ta warstwa się znajduje. W naszym przypadku będzie nad warstwą tła, która używa domyślnego indeksu Z.
Krok 2
Cały kod może wyglądać tak:
html, treść {
margines: 0px;
wzrost: 100%;
}
#tło {
pozycja: bezwzględna;
szerokość: 100%;
wzrost: 100%;
}
#ciało {
pozycja: bezwzględna;
szerokość: 100%;
wzrost: 100%;
indeks z: 2;
}
To będzie treść strony
Nie zapomnij zastąpić nazwy pliku obrazu tła fon.png.
Krok 3
Druga opcja użyje właściwości background-size wprowadzonej w CSS3. Jednocześnie dodaj podobne właściwości do definicji stylów, które były wcześniej używane przez przeglądarki Mozilla Firefox, Google Chrome i Opera. Blok opisu stylu w tej wersji może wyglądać tak:
html {
tło: url (fon.png) naprawiono środek bez powtarzania;
-webkit-background-size: okładka;
-moz-background-size: okładka;
-o-rozmiar-tła: okładka;
rozmiar tła: okładka;
}
I tutaj nie zapomnij zastąpić nazwy pliku obrazu tła fon.png. A w treści samego dokumentu w tej wersji nie są wymagane żadne specjalne konstrukcje.
