| Kolor tła: | selektor {background-color: kolor;} Przykład: -> h1{background-color: blue;} Wyraz selektor ma zastosowanie do wszystkich elementów, którym chcemy nadać tło. Natomiast jako kolor należy podać definicję koloru. |
| Tło Obrazkowe: | selektor {background-image: url(adres);} Przykład: -> h1{background-image: url(https://www.wykop.pl/cdn/c3201142/comment_1616204743ys6GhLFIeAqt8TpQFlBFjF.jpg);} Dzięki temu poleceniu można ustalić tło obrazkowe dla danego elementu. Wyraz selektor ma zastosowanie do wszystkich elementów, którym chcemy nadać tło obrazka. adres: względna ścieżka dostępu z miejsca w miejsce należy wpisać drogę uwzględniając wszystkie foldery wchodząc do folderu wpisujemy jego nazwę/ wychodząc z folderu wpisujemy ../ na końcu podajemy nazwę pliku z rozszerzeniem jeżeli jest to zewnętrzny arkusz CSS, to ścieżkę podajemy względem niego "none" - usunie obrazek |
| Powtarzanie tła: | selektor {background-repeat: powtarzanie;} Przykład: -> h1{background-repeat: "repeat-x" ;} Wyraz selektor ma zastosowanie do wszystkich elementów. powtarzanie: "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 Dzięki temu poleceniu można ustalić jeden z czterech sposobów powtarzania się obrazka jako tła. |
| Pozycja tła: | selektor {background-position: "center";} Przykład: -> h1{background-position: "center";} 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 |
| Zaczepienie tła: | selektor {background-attachment: "scroll";} Przykład: -> h1{background-attachment: "scroll";} zaczepienie: "scroll" - przewijanie tła (domyślnie) "fixed" - tło nieruchome 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. |
| Łączenie atrybutów tła | selektor {background: wartości atrybutów;} Przykład: -> div{background: #00ff00 url(../../grafiki/cwiczenie_13/tlo_css.jpg) norepeat scroll center;} Jako wartości atrybutów może występować:
|
| Gradient liniowy: | selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) } Przykład: -> h1{ background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) } Można także określić sposób rozłożenia barw w sposób związany z kątem gdzie: 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. |
| Gradient promienisty: | selektor { background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...)} p{ background: radial-gradient(circle closest-corner at 20% 50%, red 10px, blue 5px) } Jako kształt można wpisać: circle - okrąg (domyślnie gdy jako rozmiar podano pojedynczy promień, określony w jednostkach długości, a nie w procentach) ellipse - elipsa Jako rozmiar można użyć słów kluczowych: closest-side - gradient będzie się rozchodził do najbliższej krawędzi elementu closest-corner - do najbliższego narożnika farthest-corner - do najdalszego narożnika (domyślnie) 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. |