Kolor tła

 Dzięki temu poleceniu można ustalić kolor tła dla danego elementu.

selektor {background-color: kolor;}

{background-color: yellow;} → przykład

Tło obrazkowe

 Dzięki temu poleceniu można ustalić tło obrazkowe dla danego elementu.

selektor {background-image: url(adres);}

background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1024px-HTML5_logo_and_wordmark.svg.png");

Powtarzanie tła

 Dzięki temu poleceniu można ustalić jeden z czterech sposobów powtarzania się obrazka jako tła.

selektor {background-repeat: powtarzanie;}

{background-repeat: repeat;} → przykład
Parametry:
  • "repeat" - jednocześnie w pionie i poziomie - domyślnie
  • "repeat-x" - w poziomie
  • "repeat-y" - w pionie
  • "no-repeat" - pojedynczy obrazek - bez powtarzania - w górnym-lewym rogu

Pozycja tła

 Wyraz selektor ma zastosowanie do elementów blokowych.

selektor {background-position: pozycja;}

{background-position: right top;} → przykład

Parametry:

Pozycja:
jedna wartość:
  • "center" - obrazek na środku (w centrum)
  • "left" - obrazek po lewej
  • "right" - obrazek po prawej
  • "top" - obrazek na górze
  • "bottom" - obrazek na dole
  • jednostki miary - odległość od lewej krawędzi
dwie wartości (oddzielone spacją):
  • "left top" - lewy-górny róg
  • "left bottom" - lewy-dolny róg
  • "right top" - prawy-górny róg
  • "right bottom" - prawy-dolny róg
dwie jednostki miary - pierwsza z nich oznacza odległość od lewej krawędzi, a druga - od górnej


jednostki miary:
  • piksele - px
  • punkty edytorskie - pt
  • wysokość litery "x" - ex
  • wysokość aktualnej czcionki - em
  • centymetry lub milimetry - cm, mm
  • części dziesiętne centymetra pisane z
  • kropką np.: 0.5cm
  • procent wielkości nadrzędnej - %
  • cale - in (1in=2.54cm)

Zaszczepienie tła

 Domyślnie tło obrazkowe przesuwa się wraz z przewijaną stroną. Poleceniem tym można sprawić, że tło będzie nieruchome w czasie przewijania zawartości strony.

selektor {background-attachment: zaczepienie;}

{background-attachment: scroll;} → przykład

Parametry:
  • "scroll" - przewijanie tła (domyślnie)
  • "fixed" - tło nieruchome

Łączenie atrybutów tła

 Dzięki temu poleceniu można w jednym miejscu zebrać atrybuty dotyczące tła.

p {color: #800000; background: #00ff00 url(../../grafiki/cwiczenie_13/tlo_css.jpg) norepeat scroll center;} → przykład

Gradient liniowy

 Gradient to wypełnienie tłem płynnym przejściu kilku kolorów.

selektor {BACKGROUND: linear-gradient

{ background: linear-gradient(to left bottom, #FFFF00 7%, #FF0000 22%) } → przykład

Selektorem może być praktycznie dowolny znacznik:
  • p - akapit
  • h1 – tytuł
  • td - komórka tabeli
Kierunek określa sposób rozłożenia barw. Można go podać na dwa sposoby:

Słowa kluczowe:
  • to top - przejście kolorów nastąpi pionowo z dołu do góry (odpowiednik 0deg)
  • to right top - ukośnie z lewego-dolnego do prawego-górnego narożnika
  • to right - poziomo z lewej do prawej strony (odpowiednik 90deg)
  • to right bottom - ukośnie z lewego-górnego do prawego-dolnego narożnika
  • to bottom - pionowo z górny do dołu (odpowiednik 180deg - domyślnie)
  • to left bottom - ukośnie z prawego-górnego do lewego-dolnego narożnika
  • to left - poziomo z prawej do lewej strony (odpowiednik 270deg)
  • to left top - ukośnie z prawego-dolnego do lewego-górnego narożnika
kąt - liczony zgodnie z ruchem wskazówek zegara:
z wartością:
  • 0deg skierowaną pionową w górę,
  • 180deg - pionowo w dół
Kolor1 odległość1, kolor2 odległość2:
  • kolejne kolory i ich odległości na linii przejścia
    gradientu. Obowiązkowo trzeba podać przynajmniej dwie pary "kolor odległość".
    Każda taka para jest rozdzielona od kolejnej znakiem przecinka.
    Wielokropek (czyli "...") na końcu należy usunąć. Określenie odległości kolorów
    nie jest obowiązkowe - wtedy podane barwy zostaną rozłożone równomiernie w gradiencie.

Gradnient promienisty

 Gradient promienisty to tło o płynnym przejściem kilku kolorów, wywołując efekt trójwymiarowej kuli lub oświetlenia latarki.

selektor {BACKGROUND: radial-gradient}

selektor { background: radial-gradient(farthest-corner, black 30%, white 70%) } → przykład

Parametry:
  • closest-side - gradient będzie się rozchodził do najbliższej krawędzi elementu
  • farthest-side - do najdalszej krawędzi
  • closest-corner - do najbliższego narożnika
  • farthest-corner - do najdalszego narożnika (domyślnie)
  • promień - podany za pomocą jednostek długości lub procentowo
  • poziom pion - poziomy i pionowy promień elipsy, określony za pomocą jednostek długości lub procentowo