Jak dodać tło do strony internetowej: 14 kroków (ze zdjęciami)

Spisu treści:

Jak dodać tło do strony internetowej: 14 kroków (ze zdjęciami)
Jak dodać tło do strony internetowej: 14 kroków (ze zdjęciami)

Wideo: Jak dodać tło do strony internetowej: 14 kroków (ze zdjęciami)

Wideo: Jak dodać tło do strony internetowej: 14 kroków (ze zdjęciami)
Wideo: Konfiguracja poczty na iPhonie krok po kroku (Gmail, Onet, Interia, Wp, O2 ...) 2024, Może
Anonim

Tło to jeden z najważniejszych elementów strony internetowej. Dobre tło nadaje ton stronie i uzupełnia treść. Istnieje wiele różnych sposobów dodawania tła, z których każdy ma inny cel. Niektóre metody pozwalają zastosować tło do wszystkich stron w witrynie, podczas gdy inne ograniczają tło tylko do określonej strony. Z tego artykułu dowiesz się, jak dodać tło do swojej witryny za pomocą HTML lub CSS.

Kroki

Metoda 1 z 2: Metody HTML

Jednolite kolorowe tło

Dodaj tło do strony internetowej Krok 1
Dodaj tło do strony internetowej Krok 1

Krok 1. Jednokolorowe tło to najbardziej podstawowy rodzaj tła, który możesz umieścić na stronie internetowej

W rzeczywistości każda strona internetowa zaczyna się od domyślnego białego tła. Jednak podczas gdy białe tło może wyglądać bardzo elegancko i czysto, gdy jest używane z harmonijnym schematem kolorów, inne kolorowe tło może być preferowane z różnymi motywami.

Dodaj tło do strony internetowej Krok 2
Dodaj tło do strony internetowej Krok 2

Krok 2. Otwórz swój kod internetowy (źródło)

Dodaj tło do strony internetowej Krok 3
Dodaj tło do strony internetowej Krok 3

Krok 3. W tagu body dodaj atrybut o nazwie bgcolor

Teraz twój tag ciała powinien wyglądać tak-

gdzie COLORNAME to nazwa koloru. COLORNAME może być wypełniony wieloma rodzajami reprezentantów kolorystycznych-

  • (nazwa koloru)
  • (wartość szesnastkowa)
  • (wartość RGB)
Dodaj tło do strony internetowej Krok 4
Dodaj tło do strony internetowej Krok 4

Krok 4. Eksperymentowanie z RGB i # może prowadzić do wielu odcieni, ale możesz wybrać łatwy pierwszy sposób

Pamiętaj jednak, że wpisanie rzadkiego koloru jako „Ultramarine Blueish Green” spowoduje powstanie koloru białego.

Dodawanie obrazu tła

Dodanie obrazu tła jest nieco bardziej skomplikowane niż jednokolorowe tło

Dodaj tło do strony internetowej Krok 5
Dodaj tło do strony internetowej Krok 5

Krok 1. Dodaj właściwość background do tagu body, więc wygląda to tak:

gdzie SRC jest źródłem obrazu SRC może znajdować się w tym samym folderze lub innym folderze/stronie internetowej.

  • (w tym samym folderze)
  • (wewnątrz innego folderu)
  • (na innej stronie internetowej)
Dodaj tło do strony internetowej Krok 6
Dodaj tło do strony internetowej Krok 6

Krok 2. Pamiętaj, aby wpisać rozszerzenie.gif/-j.webp" />

Metoda 2 z 2: Metody CSS

Dodaj tło do strony internetowej Krok 6
Dodaj tło do strony internetowej Krok 6

Jednolite kolorowe tło

Dodaj tło do strony internetowej Krok 7
Dodaj tło do strony internetowej Krok 7

Krok 1. Aby dodać jednokolorowe tło w CSS, dodaj atrybut stylu

Możesz także nadawać identyfikatory i klasy oraz używać zarówno zewnętrznych, jak i wewnętrznych arkuszy stylów.

Dodaj tło do strony internetowej Krok 8
Dodaj tło do strony internetowej Krok 8

Krok 2. Twój tag ciała powinien wyglądać tak:

gdzie COLORNAME to nazwa koloru, wartość szesnastkowa lub RGB (Pamiętaj również ostatnie kroki jednolitego kolorowego tła w HTML, mają one również zastosowanie tutaj).

Dodawanie obrazu

Dodaj tło do strony internetowej Krok 9
Dodaj tło do strony internetowej Krok 9

Krok 1. Aby dodać obraz, dodaj atrybut stylu do tagu body

Możesz także podawać identyfikatory i klasy oraz używać zarówno zewnętrznych, jak i wewnętrznych arkuszy stylów.

Dodaj tło do strony internetowej Krok 10
Dodaj tło do strony internetowej Krok 10

Krok 2. Twój tag ciała powinien teraz wyglądać tak:

Dodaj tło do strony internetowej Krok 11
Dodaj tło do strony internetowej Krok 11

Krok 3. Pamiętaj, że źródłem jest SRC

Może pochodzić z tego samego folderu, innego folderu lub innej strony internetowej.

  • (w tym samym folderze)
  • (wewnątrz innego folderu)
  • (na innej stronie internetowej).
Dodaj tło do strony internetowej Krok 12
Dodaj tło do strony internetowej Krok 12

Krok 4. Pamiętaj, aby dodać również rozszerzenia

Powtarzające się wzorzyste tło

Dodaj tło do strony internetowej Krok 13
Dodaj tło do strony internetowej Krok 13

Krok 1. Aby utworzyć powtarzający się wzór tła, dodaj tło zgodnie z powyższymi krokami

Twój tag ciała musi być teraz zmieniony na-

Gdzie REPEAT-SETTINGS to ustawienia. Może istnieć wiele ustawień powtarzania, takich jak-

  • (Tło będzie się powtarzać zarówno w pionie, jak iw poziomie.)
  • (Tło będzie się powtarzać poziomo.)
  • (Tło będzie się powtarzać w pionie.)

Naprawiono tło obrazu

Dodaj tło do strony internetowej Krok 14
Dodaj tło do strony internetowej Krok 14

Krok 1. Naprawione tła obrazu wyglądają fajnie i nie zmieniają się podczas przewijania w dół

Aby to zrobić, wystarczy wprowadzić kilka prostych poprawek w kodzie w powyższej sekcji. Zrób poprawki, aby tag ciała wyglądał tak:

gdzie SRC jest źródłem obrazu tła, POSITION jest pozycją obrazu (może być w zakresie od środka do prawego górnego rogu); background-attachment jest głównym „katalizatorem” tego typu tła. Służy do określania położenia tła i nie zaleca się jego zmiany.

Zalecana: