Jak rozciągnąć tło strony

2022-05-11

2 lata ago
0

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

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.

Utwórz nowe dokumenty w formacie html i css (prawy klawisz myszy – „Nowy” – „plik Tekstowy”) i otwórz je przy pomocy dowolnego edytora tekstu.

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łącz wygenerowany kod CSS w HTML-plik za pomocą spoiwa tagu link:Tło strony

Utwórz nową warstwę. Za pomocą znacznika umieść na niej obraz. Na przykład:

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.

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;

Powiązane artykuły