W tym rozdziale zebrane są wszystkie właściwości oraz dostępne dla nich wartości pomocne przy modyfikacjach tła w dokumentach CSS. Możliwy do użycia z większością selektorów: span, p, div, h1, td ...

background-color : color|transparent; - Kolor tła
background-image : url|none; - Obraz tła
background-position: value; - Pozycja tła
background-size: auto|length|cover|contain; - Rozmiar tła
background-repeat: repeat|repeat-x|repeat-y|no-repeat; - Powtarzanie tła
background-origin: padding-box|border-box|content-box; - Miejsce rozpoczęcia wyświetlania tła
background-clip: border-box|padding-box|content-box; - Docinanie tła do obszaru
background-attachment: scroll|fixed|local; - Zachowanie tła przy przewijaniu strony

 

 

Ustalanie koloru tła

 

  • background-color: red; - kolor tła z tabeli kolorów

  • background-color: transparent; - ustawia kolor na przezroczysty

 

Ustalanie obrazu tła

 

  • background-image: url('/../folder/background/paper.gif'); - adres url do pliku tła. "../" oznacza wejście do wyższego katalogu. Dopuszczalne typy plików: jpg, gif, png

  • background-image: none; - brak pliku tła

 

Ustalanie gradientu tła

 

  • background-image: linear-gradient(kierunek,kolor,pozycja, ... ); - kierunek określa w którym kierunku rozlewa się gradient. Można użyć kierunków, kombinacji kierunków oraz poprzedzić je słowem "to" - czyli "w kierunku". Kierunki opisane są w osobnym dodatku. Kolor odczytujemy z tabeli kolorów. Pozycja - określa, od którego oraz do którego miejsca ma zostać tworzony dany kolor gradientu. Kropki oznaczają, że możemy dodawać kolejne kombinacje koloru i pozycji do budowania bardziej skomplikowanych gradientów.

  • background-image: repeating-linear-gradient(kierunek,kolor,pozycja, ... ); - działa tak samo jak linear-gradient() z tą różnicą, że jeśli nie zdefiniujemy obszaru do wylania gradientu od początku do końca, to właściwość ta spowoduje powtarzanie wylewania tła od miejsca, gdzie się skończyło poprzednie.

  • background-image: radial-gradient(rozmiar kształt miejsce, kolor, pozycja, ... ); - rozmiar:

    • closest-side - rozciągnięcie gradientu promienistego do najbliższych krawędzi danego elementu HTML.

    • farthest-side - rozciągnięcie gradientu promienistego do najbardziej oddalonych krawędzi danego elementu HTML.

    • closest-corner - rozciągnięcie gradientu promienistego do najbliższego rogu danego elementu HTML.

    • farthest-corner - rozciągnięcie gradientu promienistego do najbardziej oddalonego rogu danego elementu HTML. Można również podać rozmiar w standardowych jednostkach.

    Kształt określa kształt gradientu:

    • circle - kształt okrągły.

    • ellipse - kształt eleptyczny.

    Miejsce - określa miejsce od któego ma być wylewany gradient. Możemy użyć nazw kierunków po słowie "at", użyć procentów lub zwykłych jednostek. Kolor - definiujemy z tabeli kolorów. Pozycja określa od którego miejsca ma być wylewany dany kolor gradientu.

  • background-image: repeating-radial-gradient(rozmiar kształt miejsce, kolor,pozycja, ...); - działa tak samo jak radial-gradient() - ale z uzupełnianiem niezdefiniowanych obszarów.

 

 

 

Przykłady definiowania gradientów tła
background-image:linear-gradient(to right, #000 0%, #a00 100%);
Użyliśmy tu kierunku - do prawej. Kolor czarny na pozycji 0% i wylewamy do koloru #a00 na pozycji 100% czyli na końcu
background-image: repeating-linear-gradient(to right, #000 0%, #a00 10%)
Jak poprzednio kolor czarny na pozycji 0% ale kolor czerwony kończy się już na 10%. Dzięki użyciu właściwości repeating-linear-gradient kolor wylał się do końca elementu HTML. W tym przypadku do końca komórki tabeli
background-image: radial-gradient(50px circle at right top, #000 0%, #a00 50%);
Tu tworzymy gradient o promieniu 50 pikseli okrągły zaczynający się w prawym górnym rogu w kolorach czarny w środku koła i #a00 na brzegu koła. Poza obrębem koła kolor pozostaje taki jak na końcu
background-image: repeating-radial-gradient(ellipse, #000, #a00 16%, #0a0 33%,#00a 50%);
Tu z kolei mamy gradient eliptyczny. Nie zdefiniowaliśmy skąd ma się zaczynać rozlewanie więc domyślnie przyjął, że od środka. Następnie mamy zdefiniowane 3 przykładowe kolory w które nasz gradient się przekształca

Pozycja tła

  • background-position: {left|center|right} {top|center|bottom};
    obraz zostanie umieszczony od:{od lewej|na środku w poziomie|od prawej} - do:{od góry|na środku w pionie|od dołu}

  • background-position: x% y%; - Obraz tła zostanie umieszczony od pixela wyliczonego w procentach okna

  • background-position: xpos ypos; - Obraz tła zostanie umieszczony od podanych współrzędnych

 

 

Rozmiar tła

 

  • background-size: auto; - Domyślny rozmiar obrazu tła

  • background-size: x% y%; - Wielkość obrazu w poziomie i pionie w procentach wielkości okna

  • background-size: x y; - Wielkość obrazu w poziomie i pionie w pikselach

  • background-size: cover; - Skaluje obraz do wartości przy której obraz zajmuje całe okno.

  • background-size: contain; - Skaluje obraz do wartości przy której obraz mieści się w całym oknie.

 

 

 

Powtarzanie tła

 

  • background-repeat: repeat; - Powtarza obraz tła w pionie i poziomie

  • background-repeat: repeat-x; - Powtarza obraz tła tylko w poziomie

  • background-repeat: repeat-y; - Powtarza obraz tła tylko w pionie

  • background-repeat: no-repeat; - Wyświetla obraz tła tylko raz bez powtórzeń

 

 

 

Pozycja początkowa tła

 

  • background-origin: padding-box; - Domyślna. Wyświetla obraz od górnego lewego rogu obramowania elementu

  • background-origin: border-box; - Wyświetla obraz od górnego lewego rogu zawartości elementu

  • background-origin: content-box; - Wyświetla obraz od górnego lewego rogu marginesów elementu

 

 

 

Docinanie tła

 

  • background-clip: border-box; - Domyślna - obraz jest docięty do zawartości elementu

  • background-clip: padding-box; - Obraz jest docięty do obramowania elementu

  • background-clip: content-box; - Obraz jest docięty do marginesów elementu

 

 

 

Przewijanie strony a tło

 

  • background-attachment: scroll; - tło obrazkowe będzie znajdowało się zawsze w tym samym miejscu w przestrzeni zawartości danego elementu HTML

  • background-attachment: fixed; - tło obrazkowe będzie znajdowało się zawsze w tym samym miejscu w przestrzeni zawartości okna przeglądarki internetowej

  • background-attachment: local; - tło obrazkowe elementu będzie przewijać się wraz z jego zawartością

 

 

reveal-a

reveal-a

×

reveal-b

reveal-b

×

reveal-c

reveal-c

×