Jak Umieścić Tło Na Stronie

Spisu treści:

Jak Umieścić Tło Na Stronie
Jak Umieścić Tło Na Stronie

Wideo: Jak Umieścić Tło Na Stronie

Wideo: Jak Umieścić Tło Na Stronie
Wideo: Kurs html #11 Tło na stronę 2024, Listopad
Anonim

Tło działania witryny można porównać do tapety na pulpicie systemu operacyjnego. Tło (tło), możesz stworzyć w kilku odmianach, które zostaną omówione poniżej.

Jak umieścić tło na stronie
Jak umieścić tło na stronie

Niezbędny

Edycja pliku style.css

Instrukcje

Krok 1

Monochromatyczne tło. Najprostszy rodzaj tła, dużym plusem jest minimalne wczytywanie strony przy użyciu takiego zdjęcia. Jeśli plik stylu (style.css) nie zawiera poleceń, które ustawiają kolor tła, przeglądarka domyślnie sugeruje kolor biały. Użyj polecenia kolor tła, aby zmienić kolor. Przykład użycia tego polecenia: background-color: # 3366CC.

Krok 2

Aby wybrać określony kolor, możesz użyć specjalnego oprogramowania, na przykład edytora graficznego Adobe Photoshop. Jeśli nigdy z nim nie pracowałeś, zaleca się korzystanie z usług internetowych. Uderzającym przykładem jest wyszukiwarka „Yandex”, przejdź do następującego linku https://yandex.ru i wprowadź frazę „kolor niebieski”. Przed tobą pojawi się tabela kolorów, w której możesz wybrać dowolny według własnych upodobań, skopiować kod i wkleić go do kodu strony.

Krok 3

Tekstura tła. Oprócz koloru tła możesz dodać obraz lub cyklicznie powtarzający się wzór (teksturę) do dowolnej strony witryny. Aby to zrobić, po wprowadzeniu koloru tła napisz polecenie background-image, na przykład background-image: url (img / uzor.png). Ścieżka do pliku musi być podana w nawiasach. Warto zauważyć, że rozdzielczość tekstur może zaczynać się od najmniejszych (16x16) a kończyć na pełnowymiarowych obrazach dla rozmiaru stron serwisu (800x600 i więcej).

Krok 4

Tło za pomocą gradientu. W tym przypadku używasz koloru tła, który został ustawiony za pomocą polecenia background-color, ale tworzysz gradient. Gradient może być poziomy (x) i pionowy (y). Najczęściej jako gradient tła używana jest pozycja pozioma, więc linia z gradientem będzie wyglądać tak: background-repeat: repeat-x.

Zalecana: