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ą