W tej lekcji dodamy tło i poznamy możliwości jego formatowania:
Kolor
Kolor tła ustalamy za pomocą background-color.
selektor { background-color: wartość; }Wykaz podstawowych kolorów.
- black (czarny)
- white (biały)
- red (czerwony)
- blue (niebieski)
- green (zielony)
- silver (srebrny)
- gray (szary)
- yellow (żółty)
- purple (purpurowy)
- maroon (kasztanowy)
- olive (oliwkowy)
- lime (limonkowy)
- aqua (morski)
- teal (teal)
- navy (granatowy)
p { background-color: yellow; }Przykład
Tło koloru żółtego.
Obrazek w tle
Obrazek jako tło ustalamy za pomocą background-image.
selektor { background-image: ścieżka do obrazka; }body { background-image: url(../images/arrow2.png); }Przykład
Kilka obrazków w tle.
selektor { background-repeat: ścieżka do obrazka1, ścieżka do obrazka2; }Pozycja
Pozycję obrazka w tle ustalamy za pomocą background-position.
selektor { background-position: wartość; }Możemy zastosować wartości:
- left – na lewo
- right – na prawo
- top – w górze
- bottom – na dole
- center – na środku
- odległość np. px, em, cm, %
body { background-position: top right; }Przykład
Powtarzanie
Powtarzanie obrazka w tle ustalamy za pomocą background-repeat.
selektor { background-repeat: ścieżka do obrazka; }Możemy zastosować wartości:
- repeat – powtarzanie w pionie i poziomie
- repeat-x – powtarzanie w poziomie
- repeat-y – powtarzanie w pionie
- no-repeat – bez powtarzania
- space – obrazki w tle i przestrzeń pomiędzy bez przycinania
- round – obrazki w tle bez przycinania
body { background-repeat: repeat-x; }Przykład
Położenie
Pozycję obrazka w tle ustalamy za pomocą background-position.
selektor { background-attachment: wartość; }Możemy zastosować wartości:
- scroll – tło przewijane (domyślne)
- fixed – tło zablokowane
- local – tło zablokowane względem elementu, w którym się znajduje
body { background-attachment: fixed; }Przykład
Rozmiar
Rozmiar obrazka ustalamy za pomocą background-size.
selektor { background-size: wartość; }Możemy zastosować wartości:
- auto – rozmiar obrazka (domyślny)
- cover – rozmiar obrazka zostanie zwiększony na szerokość elementu
- contain – rozmiar obrazka zostanie zwiększony na wysokość elementu
- piksele – rozmiar obrazka w pikselach
- procenty – rozmiar obrazka w procentach
body { background-size: 30%; }Przykład
Połączenie właściwości
Kilka właściwości w jednej deklaracji.
selektor { background: wartość; }body { background: blue url(../images/arrow2.png) top center repeat-y; }Przykład