17. Tła w CSS

Tło jest ciekawym i popularnym elementem dekoracyjnym stosowanym na wielu stronach internetowych. Pozwala uzyskać atrakcyjne efekty wizualne oraz urozmaicić wygląd prezentowanej treści, a jednocześnie nie wymaga zaawansowanej wiedzy technicznej, choć z pewnością dobrze jest za to mieć odrobinę wyobraźni i zmysłu artystycznego.

Niestety, jeśli masz problemy w tej drugiej kwestii, to mogę Ci jedynie polecić rozejrzenie się po internecie i poszukanie inspiracji. Z łatwością znajdziesz wiele efektownych projektów, na których możesz się wzorować, aby stworzyć własną koncepcję.

Zanim jednak zaczniesz definiować tło elementów na stronach internetowych, musisz dowiedzieć się, jak to się w ogóle robi. W tym rozdziale kursu poznasz techniczne aspekty definiowania teł elementów, czyli poznasz własności CSS, które do tego służą.

Podstawowe wiadomości o tłach

W CSS istnieje specjalna grupa własności służących do pracy z tłami. Za ich pomocą można nadać wybranym elementom na stronie zarówno tło w jednolitym kolorze, jak i umieścić w ich tle różnego rodzaju grafiki, takie jak obrazy rastrowe (np. PNG, WebP czy JPG), obrazy wektorowe SVG czy gradienty, a także można kontrolować ich różne właściwości. Prawie wszystkie własności służące do pracy z tłami są zdefiniowane w specyfikacji CSS Backgrounds and Borders Module Level 3, ale jest jeden wyjątek.

Przypomnijmy, że zgodnie z modelem polowym CSS każdy element na stronie jest reprezentowany przez tzw. pole składające się z takich części, jak treść właściwa, dopełnienie czy obramowanie. Ponadto każde pole ma też warstwę tła, która domyślnie jest przezroczysta, a więc niewidoczna.

Za pomocą odpowiednich własności CSS możemy jednak nią manipulować, wypełniając ją na przykład jednolitym kolorem albo umieszczając na niej obraz bądź kilka obrazów i określając ich różne właściwości, takie jak położenie, rozmiar, sposób powielenia itd.

Jeśli zdefiniujemy tło elementowi zawierającemu elementy potomne, to będzie ono widoczne także w tle tych potomków, ponieważ domyślnie tło wszystkich elementów HTML jest przezroczyste. Jeśli zdefiniujemy tło w elemencie potomnym, to znajdzie się ono „nad” tłem elementu nadrzędnego i je przesłoni.

Poniższa tabela zawiera wykaz własności tła dostępnych w CSS wraz z ich zwięzłymi opisami. Nazwy własności są odnośnikami do osobnych stron z ich szczegółowym opisem. Natomiast w kolumnie Podrozdział znajdują się odwołania do sekcji zawierających ich praktyczny opis na tej stronie.

Ustawianie koloru tła

Najprostszym możliwym sposobem dekoracji tła elementu jest nadanie mu jednolitego koloru. Służy do tego własność background-color, która przyjmuje dowolny typ wartości koloru obsługiwany przez CSS, a więc np. wartość szesnastkową, wartość w formacie RGB, wartość w formacie CIE Lab, słowa kluczowe kolorów itd., np.:

div {background-color: magenta;}
div {background-color: #ff00ff;}
div {background-color: rgb(255, 0, 255);}
div {background-color: lab(60% 94 -60);}

Wszystkie powyższe reguły definiują ten sam różowy kolor tła, który wygląda tak:

Należy pamiętać, że kolor tła zajmuje warstwę pod obrazem tła, jeśli ten jest zdefiniowany, przez co może być niewidoczny, gdy obraz zakrywa całe tło.

Ponadto warto pamiętać, że kolor tła powinno się definiować zawsze, gdy jest używany obraz w tle. Dzięki temu, jeśli ten obraz się nie wczyta, element nie pozostanie całkiem bez dekoracji.

Ustawianie obrazu tła

Jeśli zwykły jednolity kolor w tle elementu nie spełnia naszych oczekiwań estetycznych, to możemy pójść o krok dalej i umieścić tam obraz graficzny. W CSS dostępny jest całkiem pokaźny zestaw własności umożliwiających wstawianie obrazów w tle elementów oraz kontrolowanie ich różnych właściwości.

Podstawową własnością z tej grupy jest background-image, która wstawia obraz w tle wybranego elementu. Może ona jednak nie wystarczyć, aby uzyskać dokładnie taki efekt, jaki sobie wymarzyliśmy.

Powiedzmy na przykład, że na naszej stronie chcemy przedstawić przepis na kawę, więc w tle reprezentującego go elementu postanowiliśmy umieścić następujący obraz filiżanki z parującym napojem:

Efekt, na jakim nam zależy, widać na poniższym zrzucie ekranu. Chcemy, aby filiżanka zajmowała dużą część powierzchni tła oraz aby była bardzo słabo widoczna.

Za pomocą samej własności background-image nie uzyskamy takiego efektu, ponieważ domyślnie wstawia ona obraz w tle w jego wymiarach naturalnych i powiela go w pionie i w poziomie tak, aby zapełnić całą dostępną przestrzeń.

Gdybyśmy więc powyższy obraz filiżanki ustawili w tle elementu za pomocą samej własności background-image, wyglądałoby to mniej więcej tak, jak na poniższym zrzucie ekranu.

div {
  background-image: url("filizanka.png");
}

Dlatego właśnie w CSS dostępny jest cały zestaw własności dotyczących ustawiania obrazów w tle elementów. Za ich pomocą możemy określić, czy obraz w tle ma być powielany, w jaki sposób ma on wypełniać tło, jaki ma mieć rozmiar, w którym miejscu powinien się zaczynać, czy ma być „przyklejony”, czy powinien przewijać się wraz z treścią elementu itd.

Wszystkie te własności są wymienione w tabeli Własności tła CSS oraz opisane w następnych sekcjach. Tutaj natomiast skupiamy się tylko na samym określaniu, który plik graficzny chcemy umieścić w wybranym przez nas elemencie HTML, czyli na sposobie użycia własności CSS background-image.

Własność background-image

Własność background-image, która służy do ustawiania obrazów w tle elementów, jest bardzo łatwa w użyciu. Aby ustawić wybrany obraz w tle elementu, wystarczy wskazać jego adres za pomocą funkcji url(), np.:

div {
  background-image: url("/gfx/obraz.png");
}

Ta reguła CSS wstawi grafikę o nazwie obraz.png z folderu gfx znajdującego się w katalogu głównym w tle wszystkich elementów div na stronie.

To jednak nie wszystko, co potrafi ta własność. Tak naprawdę za jej pomocą w tle elementu można ustawić dowolną liczbę obrazów w różnych formatach, takich jak PNG, JPG czy SVG, a nawet gradienty. Inaczej mówiąc, własność ta przyjmuje rozdzielaną przecinkami listę wartości określających dowolny rodzaj grafiki obsługiwany przez CSS, np.:

background-image: url("obraz1.png"), url("obraz2.png"), url("obraz3.png"), radial-gradient(red, green, blue);

Ta reguła wstawia w tle elementu aż cztery grafiki – trzy obrazy w formacie PNG i gradient promienisty. Oczywiście to tylko przykład możliwości własności background-image, a nie zachęta do używania jej w ten sposób.

Wracając do przykładu z filiżanką, to wiemy już, jak wstawić jej obraz w tle wybranego elementu. Z kolei, jeśli chodzi o zmianę poziomu przezroczystości obrazu w tle, to niestety w CSS nie ma specjalnej własności, która do tego służy.

W przypadku jednolitego koloru poradzilibyśmy sobie, posługując się kanałem alfa. Natomiast w przypadku obrazu graficznego z tym problemem można poradzić sobie na kilka sposobów, na przykład przy użyciu pseudoelementów CSS, ale najprościej chyba jest po prostu zmienić poziom przezroczystości obrazu w edytorze grafiki. Na razie skupimy się jednak na innych sprawach.

Kiedy już wstawimy wybrany obraz w tle elementu, możemy zechcieć zapanować nad sposobem jego powielania (albo ewentualnie je wyłączyć).

Kontrola powielania obrazu w tle

Jak już wiesz, jeśli użyjesz samej własności background-image, to obraz ustawiony w tle zostanie powielony w pionie i poziomie tyle razy, ile trzeba, aby wypełnić cały dostępny obszar tła.

W nielicznych przypadkach mogłoby to być pożądane zachowanie, np. gdy w tle elementu ustawimy specjalną grafikę, która dzięki powieleniu tworzy dekoracyjny wzór. Weźmy na przykład poniższy obraz:

Ten obraz jest specjalnie tak zbudowany, aby po powieleniu w poziomie i pionie tworzył jednolity wzór. Jeśli więc wstawimy go w tle elementu za pomocą własności background-image i nie użyjemy żadnych innych własności CSS odnoszących się do grafik w tle, to uzyskamy efekt pokazany na poniższym zrzucie ekranu.

aside {
  background-image: url("puzzle.png");
}

Efekt:

Obraz w tle elementu został powielony w obu kierunkach, dzięki czemu całość wygląda, jak jednolity wzór.

Nie zawsze jednak chcemy, aby obraz w tle był powielany lub chcemy powielić go w specyficzny sposób – w takim przypadku użyjemy własności background-repeat. Za jej pomocą możemy sprawić, że obraz w tle będzie powielany tylko w pionie lub tylko w poziomie, że będzie dopasowywany rozmiarem do rozmiaru elementu, że w ogóle nie będzie powielany itd.

Szczegółowy opis wszystkich wartości tej własności znajduje się na stronie Własność CSS background-repeat, a teraz skupimy się tylko na wyłączaniu powielania, do czego służy wartość no-repeat.

Wracając do naszego przykładu z filiżanką, tamten obraz nie jest przystosowany do powielania w jakikolwiek sposób. Skoro więc chcemy, aby w tle elementu był widoczny tylko jeden jego egzemplarz, użyjemy własności background-repeat o wartości no-repeat:

div {
  background-image: url("filizanka.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}

Efekt:

Szerokość, wysokość i obramowanie tego elementu div zostały zdefiniowane po to, aby pokazać efekt działania własności no-repeat.

Jak widać, teraz w tle elementu div znajduje się już tylko jedna filiżanka, ale to nadal nie jest taki efekt, o jaki nam chodzi. Filiżanka powinna być większa i umieszczona na środku elementu. Najpierw zajmiemy się pozycjonowaniem grafiki w tle – służy do tego własność background-position.

Pozycjonowanie obrazu w tle

Do określania położenia obrazu w tle elementu służy własność background-position. Daje ona bardzo duże możliwości w zakresie kontroli umiejscowienia grafiki, ponieważ pozwala na używanie słów kluczowych, konkretnych liczb z jednostką długości oraz procentów.

Najprostsze w użyciu, i najmniej precyzyjne, są słowa kluczowe. Jest ich pięć: top (góra), right (prawa), bottom (dół), left (lewa) i center (środek). Można ich używać pojedynczo lub parami.

Jeśli użyjemy tylko jednego spośród słów kluczowych top, right, bottom i left, to automatycznie druga wartość zostanie ustawiona na 50%. W efekcie obraz w tle zostanie ustawiony na środku krawędzi, którą wskazuje dane słowo kluczowe. Spójrz na poniższy przykład:

div {
  background-image: url("filizanka.png");
  background-repeat: no-repeat;
  background-position: top;
  width: 500px;
  height: 300px;
  border: 1px solid red;
}

W tym przypadku filiżanka znajdzie się pod górną krawędzią w jej środkowej części, jak widać na poniższym zrzucie ekranie:

Jeśli użyjemy tylko jednego słowa kluczowego center, to obraz tła zostanie ustawiony dokładnie na środku elementu w pionie i poziomie.

Dwa słowa kluczowe oznaczają położenie w poziomie i w pionie. W związku z tym przykładowa wartość left top oznacza lewy górny róg elementu, right bottom – prawy dolny róg elementu, bottom center – środek dolnej krawędzi itd.

Wracając do naszego przykładu z początku tego rozdziału, pożądany efekt uzyskamy za pomocą poniższej deklaracji:

background-position: center;

Ta deklaracja CSS ustawi obraz tła dokładnie na środku elementu. Jeśli następnie odpowiednio zwiększymy jego rozmiar i zmienimy poziom przezroczystości, nasz kontener do prezentacji przepisu na kawę będzie gotowy. Obecnie wygląda to tak:

Jeśli interesuje Cię szczegółowy opis wszystkich wartości własności background-position, to znajduje się on na stronie Własność CSS background-position. Teraz natomiast zajmiemy się zmianą rozmiaru obrazu w tle. Służy do tego własność background-size.

Określanie rozmiaru obrazu w tle

Do określania rozmiaru obrazu w tle służy własność CSS background-size. Podobnie jak poprzednia, przyjmuje ona jako wartość zarówno słowa kluczowe, jak i konkretne liczby z jednostką długości oraz wartości procentowe, np.:

background-size: contain;
background-size: 20px 30px;

Użyte w pierwszej z powyższych deklaracji słowo kluczowe contain sprawia, że obraz tła zostaje powiększony do maksymalnego rozmiaru, przy którym mieści się w obszarze tła bez konieczności przycinania i zmiany proporcji wymiarów.

Poza tym własność background-size przyjmuje jeszcze słowo kluczowe cover, które powoduje, że obraz tła całkowicie wypełnia obszar tła z zachowaniem naturalnych proporcji, oraz słowo kluczowe auto, które powoduje, że rozmiar obrazu w danym wymiarze jest skalowany z zachowaniem jego naturalnych proporcji.

Z kolei wartości liczbowe umożliwiają dokładniejsze określenie wymiarów obrazu w tle. Jeśli na przykład chcemy, aby obraz zajmował 80% wysokości obszaru tła, a jego szerokość była proporcjonalnie dostosowywana do tej wartości, to możemy użyć kombinacji wartości auto i 70%. Spójrz na poniższą regułę CSS:

div {
  background-image: url("filizanka.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 70%;
  width: 500px;
  height: 300px;
  border: 1px solid red;
}

W tym przypadku kontener ma wymiary 500 × 300 pikseli, a więc wysokość obrazu ustawionego w jego tle wyniesie 70% z 300, czyli 210 pikseli. Natomiast szerokość tego obrazu zostanie ustawiona proporcjonalnie do wysokości.

Gdyby nasz obraz miał wymiary 10 × 20 pikseli, to oznaczałoby to, że jego wysokość zwiększyła się 10,5 razy (210 : 20 = 10,5). W związku z tym przez taką samą liczbę mnożymy szerokość i uzyskujemy wartość 105 pikseli. Ostatecznie więc nasz obraz w tle miałby 105 pikseli szerokości i 210 pikseli wysokości. Jak widać proporcje zostały zachowane, ponieważ 10 jest połową 20, a 105 jest połową 210.

Teraz nasz element wygląda tak:

Teraz obraz tła znajduje się tam gdzie chcemy i ma pożądany przez nas rozmiar. Pozostało nam już tylko zmienić jego poziom przezroczystości i uzyskamy efekt przedstawiony na początku tego rozdziału.

Oczywiście ta technika ma pewne ograniczenia. Na przykład wymiary elementu div są tylko przykładowe. Gdybyśmy ich nie określili i element ten zawierałby bardzo dużo treści, to mogłoby się okazać, że obraz w jego tle zostałby powiększony tak bardzo, że zacząłby źle wyglądać. Z drugiej strony projektujemy element do prezentacji przepisu na kawę, więc możemy sobie pozwolić na ustawienie sztywnych lub częściowo elastycznych (np. za pomocą własności max-width i max-height) wymiarów.

Gdybyśmy chcieli móc zwiększać w nieskończoność wysokość elementu zawierającego obraz w tle, to moglibyśmy na przykład użyć wzoru powtarzalnego i ustawić jego powielanie tylko w pionie za pomocą odpowiedniej wartości własności background-repeat.

Jeśli chodzi o pogorszenie jakości obrazu z powodu zwiększania jego rozmiaru, to w tym przypadku ten problem nie jest zbyt dokuczliwy, ponieważ przypomnę, że zamierzamy tak bardzo zwiększyć jego poziom przezroczystości, że stanie się on ledwie widoczny, dzięki czemu niedoskonałości będą praktycznie niedostrzegalne.

Jeśli chcesz się o tym przekonać, to kliknij poniższy obrazek, aby zobaczyć, jak wygląda powyższy element, gdy jego wymiary zostały zwiększone do 1000 × 1200 pikseli, a krycie obrazu w tle zostało zmniejszone do 3%.

Opisane powyżej własności tła należą do najczęściej używanych, ale nie wyczerpują zasobu narzędzi CSS z tej kategorii. W tabeli Własności tła CSS znajdują się jeszcze cztery własności, którym do tej pory dokładniej się nie przyjrzeliśmy oraz własność zbiorcza background, która umożliwia zwięzłe zdefiniowanie większości pozostałych. Przyjrzymy się im wszystkim teraz.

Obrazy w tle elementów przewijanych

Jeśli element z ustawionym obrazem w tle zawiera dużo treści, która jest przewijana, to domyślnie ten obraz jest przytwierdzony do tła i nie przewija się razem z treścią, jak w poniższym przykładzie:

Jeśli jednak wolisz, aby obraz tła przewijał się razem z treścią, możesz to zmienić za pomocą własności background-attachment, która jako wartość przyjmuje słowa kluczowe scroll, fixed i local.

Wartość scroll to ustawienie domyślne, które zostało zaprezentowane powyżej. Wartość fixed przytwierdza obraz tła w odniesieniu do okna przeglądarki, a wartość local – w odniesieniu do elementu, dla którego jest zdefiniowany, np.:

background-attachment: local;

Po dodaniu tej deklaracji do powyższego elementu zachowanie elementu w tle zmieni się – będzie się on przewijał wraz z treścią.

Dokładniejszy opis własności background-attachment znajduje się na stronie Własność CSS background-attachment.

Określanie punktu początkowego tła

Zgodnie z modelem polowym CSS każdy element HTML jest na stronie reprezentowany przez specjalne pole, które składa się z kilku obszarów, takich jak obszar obramowania, obszar dopełnienia i obszar treści.

Za pomocą własności CSS background-origin można wybrać, w którym z tych obszarów ma się znajdować początek obrazu wstawionego w tle elementu. Wartość border-box oznacza obszar obramowania, padding-box oznacza obszar dopełnienia, a content-box oznacza obszar treści.

Na przykład powiedzmy, że mamy następującą regułę CSS:

div {
  background-image: url("obraz.jpg");
  background-repeat: no-repeat;
  background-origin: content-box;
  width: 400px;
  height: 300px;
  border: 20px dashed red;
  padding: 25px;
}

Własność background-origin ma wartość content-box, co oznacza, że obraz ustawiony w tle będzie zaczynał się od krawędzi obszaru treści:

Dokładniejszy opis własności background-origin znajduje się na stronie Własność CSS background-origin.

Wybieranie miejsca obcięcia obrazu tła

Opisana poprzednio własność background-origin określa miejsce początku obrazu tła elementu. Własność background-clip także przyjmuje wartości border-box, padding-box i content-box, które odnoszą się do różnych obszarów pola elementu w modelu polowym CSS, ale nie określa miejsca początku obrazu tła, tylko miejsce jego obcięcia. W wyniku jej działania początek obrazu tła nie zostaje przesunięty w określone miejsce, tylko obraz tła zostaje obcięty w określonym obszarze, np.:

div {
  background-image: url("obraz.jpg");
  background-repeat: no-repeat;
  background-origin: border-box;
  width: 400px;
  height: 300px;
  border: 20px dashed red;
  padding: 25px;
}

Obecnie nasz element div wygląda tak:

A teraz do poprzedniej reguły CSS dodamy poniższą deklarację:

Efekt tej zmiany jest następujący:

Własność background-clip o wartości content-box spowodowała, że obraz ustawiony w tle elementu div został obcięty na granicy obszaru treści tego elementu.

Dokładniejszy opis własności background-clip znajduje się na stronie Własność CSS background-clip.

Mieszanie obrazów w tle

Wszystkie opisane powyżej własności CSS dotyczące tła należą do modułu CSS Backgrounds and Borders Module Level 3, ale istnieje jeszcze własność background-blend-mode, która pochodzi z modułu Compositing and Blending Level 2. Choć specyfikacja ta jest jeszcze we wczesnej fazie rozwoju, to niektóre jej składniki są już zaimplementowane przez przeglądarki. Jednym z nich jest właśnie własność background-blend-mode.

Kiedy w tle elementu zdefiniujemy więcej niż jeden obraz, to są one wyświetlane jeden na drugim w takiej kolejności, że najbliżej użytkownika jest ten, który został zdefiniowany pierwszy. Za pomocą własności background-blend-mode można sprawić, aby te obrazy nie tylko zostały wyświetlone jeden na drugim, ale także, aby się w określony sposób zmieszały w miejscu, w którym się na siebie nakładają.

Własność ta ma całkiem pokaźny zestaw słów kluczowych, których można używać jako jej wartości. Ich szczegółowy opis znajduje się na stronie Własność CSS background-blend-mode. Poniżej natomiast znajduje się przykład użycia jednej z nich.

Powiedzmy, że mamy następującą regułę CSS:

div {
  background-image: url("a.png"), url("b.jpg");
  background-repeat: no-repeat;
  background-position: center;
  width: 300px;
  height: 200px;
}

Obecnie ten element div wygląda tak:

A teraz do powyższej reguły dodamy poniższą deklarację własności background-blend-mode:

background-blend-mode: color-burn;

Teraz nasz element wygląda tak:

Zbiorcze definiowanie własności tła

Własność zbiorcza background umożliwia definiowanie prawie wszystkich opisanych powyżej własności (wyjątkiem jest własność background-blend-mode) dotyczących tła na raz. Dzięki niej można zaoszczędzić sobie sporo pisania i uzyskać o wiele bardziej zwięzły kod. Powiedzmy że mamy poniższą regułę CSS:

div {
  background-image: url("d.jpg");
  background-repeat: no-repeat;
  background-position: center left;
  background-attachment: local;
  background-color: red;
  background-origin: border-box;
  background-clip: content-box;
  background-size: 90%;
}

Wszystkie te deklaracje możemy zastąpić jedną poniższą deklaracją:

background: url("d.jpg") no-repeat center left / 90% local red border-box content-box;

Oczywiście nie ma obowiązku definiowania wartości dla wszystkich własności składowych we własności background. Można zdefiniować ich dowolną liczbę i wówczas pozostałe przyjmą wartości domyślne.

Szczegółowy opis własności background znajduje się na stronie Własność CSS background.