Wyśrodkowanie elementu, zmiana tła

Artykuł  | Mirosław Zelent

Wyśrodkowanie, automatyczne marginesy

Element można wyśrodkować na ekranie, z użyciem znanej sztuczki z automatycznymi marginesami. Ustawienie automatycznych marginesów z lewej i prawej strony powoduje, iż przeglądarka zawsze wyśrodkuje diva względem szerokości dostępnego płótna (niezależnie od rozmiaru ekranu – nawet przy zmianie wielkości okna pojemnik ułoży się na środku ekranu).

#container
{
margin-left: auto;
margin-right: auto;
}

Tło elementu: 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ą – patrz rozdział o zapisie barw w CSS).

{ background-color: yellow; }

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/dark.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ść 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!). Do przetestowania działania tego atrybutu w przeglądarce warto tymczasowo wyłączyć powtarzanie tła (patrz właściwość powyżej).

{
background-position: center top;
background-position: 25% 75%;
}

Rozmiar tła – jak wielki ma być obraz tła? Możemy użyć 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, 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;
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;
}

Komentarze

Czy macie jakieś uwagi, pytania, sugestie? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach. Dziękujemy Wam za poświęcony czas!