Język znaczników HTML umożliwia projektantowi stron internetowych użycie dowolnego obrazu jako obrazu tła. Jednak sam język nie ma wbudowanych kontrolek dla obrazów tła. Bardziej precyzyjne dostrajanie odbywa się za pomocą kaskadowych arkuszy stylów CSS.
Instrukcje
Krok 1
Aby tło było rozciągnięte na całą szerokość przeglądarki, musisz użyć parametru z-index w swoim CSS. Pozwala ustalić kolejność tworzonych elementów. Im wyższa wartość tego atrybutu, tym wyżej blok będzie znajdował się na stronie.
Krok 2
Twórz nowe dokumenty w formacie html i css (prawy przycisk myszy - "Nowy" - "Plik tekstowy") i otwieraj je za pomocą dowolnego edytora tekstu.
Krok 3
Umieść obraz tła na dolnej warstwie. Rozciągnie się w zależności od rozdzielczości ekranu. Na górze znajdzie się kolejny element, na którym będzie wyświetlana zawartość strony. Aby to zrobić, utwórz dwa bloki. W pliku css wpisz:.1warstwa {z-index: 1; szerokość: 100% wysokość: 100% pozycja: bezwzględna;}.2warstwa {Pozycja: bezwzględna; z-indeks: 2; } Parametr position: absolute pozwala na ustawienie pozycjonowania bezwzględnego, tj. warstwa zostanie umieszczona niezależnie od innych elementów.
Krok 4
Dołącz wygenerowany kod CSS do pliku HTML za pomocą tagu link: Tło strony
Krok 5
Utwórz nową warstwę. Korzystanie z tagu
umieść na nim zdjęcie. Na przykład: Zawartość strony Dla img podawany jest tylko parametr width, ponieważ jeśli określisz dodatkowo wysokość, w niektórych przeglądarkach pojawi się zniekształcenie obrazu.
Krok 6
Zapisz zmiany. Aby przetestować kod, powiększ stronę w oknie przeglądarki. Obraz tła również powinien zostać powiększony.
