Jak rozciągnąć tło strony
Język znaczników HTML pozwala projektantowi witryny użyć jako tapetę dowolny obrazek. Jednak w samym języku nie wystarczy wbudowanych narzędzi do zarządzania procesami obrazkami. Bardziej dokładna regulacja odbywa się za pomocą kaskadowych arkuszy stylów CSS.
Instrukcja
1
Aby zrobić tło, który ma być rozciągnięta na całą szerokość przeglądarki, należy użyć opcji z-index w CSS. Pozwala on określić kolejność tworzonych elementów. Im większa wartość tego atrybutu, tym wyższy blok będzie pojawiało się na stronie.
2
Utwórz nowe dokumenty w formacie html i css (prawy klawisz myszy – „Nowy” – „plik Tekstowy”) i otwórz je przy pomocy dowolnego edytora tekstu.
3
Ustaw obraz tła na dolnej warstwie. Będzie rozciągać się w zależności od rozdzielczości ekranu. Na górze znajduje się inny element, na którym będzie wyświetlana zawartość strony. Aby to zrobić, należy utworzyć dwa bloki
. W pliku css napisz:.1layer { z-index: 1;width: 100%height: 100%position: absolute;}.2layer {Position: absolute;z-index: 2; }Parametr position: absolute pozwala określić położenie bezwzględne, czyli warstwa będzie znajdować się niezależnie od innych elementów.
. W pliku css napisz:.1layer { z-index: 1;width: 100%height: 100%position: absolute;}.2layer {Position: absolute;z-index: 2; }Parametr position: absolute pozwala określić położenie bezwzględne, czyli warstwa będzie znajdować się niezależnie od innych elementów.
4
Włącz wygenerowany kod CSS w HTML-plik za pomocą spoiwa tagu link:Tło strony
5
Utwórz nową warstwę. Za pomocą znacznika
Zawartość strony
Dla img ustawiana jest tylko ustawienie szerokości, ponieważ jeśli określić dodatkowo height, w niektórych przeglądarkach pojawia się zniekształcenie obrazu.
6
Zapisz wprowadzone zmiany. Aby sprawdzić, czy napisany kod, zwiększ stronę w oknie przeglądarki. Tapeta musi też rosnąć.
Porada
Aby uniknąć poziomego paska przewijania po wyświetleniu w przeglądarce, do warstwy 1layer należy wskazać zerowe, współrzędne lewego i prawego górnego narożnika:
padding-left: 0px;
padding-right: 0px;