Tło elementu: właściwość background

Pora omówić w jaki sposób ustawiamy tło elementu z użyciem właściwości background oraz jej licznych subatrybutów (dopisywanych po myślniku), których możemy użyć. Są to między innymi: background-color, background-image, background-repeat, background-position, background-size, background-attachment.

Kolor ustawionego tła

Po dwukropku podajemy poprawny zapis koloru (stałą tekstową, notację szesnastkową lub dziesiętną).

background-color: yellow;
background-color: #2e353f;
background-color: rgb(59, 75, 102);

Obraz tła

Wewnątrz nawiasów podajemy prawidłową ścieżkę dostępu do grafiki. Nie można zapomnieć o użyciu url (ang. uniform resource locator).

background-image: url("img/tlo.jpg");

Powtarzanie tła

Określamy czy nasz obraz tła ma zostać użyty do wykafelkowania całego dostępnego okna przeglądarki (repeat), czy jednak powtarzanie ma następować tylko w jednej osi (repeat-x, repeat-y), bądź ma zostać wyłączone (no-repeat).

background-repeat: no-repeat;

Pozycja tła

Jako wartość background-position możemy zapisać kombinację dwóch słów (spośród takiego zestawu: left, right, top, bottom, center) albo użyć wartości procentowych. Pierwsze słowo określa jak tło zachowa się w poziomie, a drugie w pionie (uwaga: nie wstawiamy pomiędzy te słowa myślnika – patrz przykład poniżej). Do przetestowania działania tego atrybutu w przeglądarce warto tymczasowo wyłączyć powtarzanie tła (używając background-repeat: no-repeat;).

background-position: center top;
background-position: left bottom;
background-position: 25% 75%;

Rozmiar tła

Jak wielki ma być obraz tła? Możemy użyć następujących słów kluczowych: auto (dopasowanie automatyczne realizowane przez przeglądarkę), cover (obraz możliwe największy), contain (przeskaluj obraz do największego rozmiaru, ale tak aby jego szerokość i wysokość zmieściły się na płótnie – chodzi o zachowanie oryginalnej proporcji obrazu), albo użyć wartości procentowych %, wyrażonych w pikselach px, bądź w jednostce em:

background-size: auto auto;
background-size: cover;
background-size: contain;
background-size: 75%;
background-size: 24px;
background-size: 1.5em;

Przymocowanie tła

Jeśli ustawiliśmy grafikę tła, to z pomocą background-attachment możemy zdecydować, jak grafika zachowa się w oknie przeglądarki. Możliwe wartości: scroll (obraz tła przewija się wraz z zawierającym go pojemnikiem), fixed (ustalone przymocowanie – obraz tła nie będzie przewijać się wraz z zawierającym go pojemnikiem).

background-attachment: fixed;
background-attachment: scroll;

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Zamów książki o IT sec z kodem: pasja

Wprowadzenie do bezpieczeństwa IT tom 1
Wprowadzenie do bezpieczeństwa IT tom 2

Można już zamawiać dwa tomy książek "Wprowadzenie do bezpieczeństwa IT". Mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności! Zamówień można dokonywać tutaj:

Tom 1 Tom 2

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać: kontakt@pasja-informatyki.pl. Dziękujemy za poświęcony czas - to dzięki Wam serwis staje się coraz lepszy!

Bądź na bieżąco
Pasja informatyki