Wyśrodkowanie elementu, zmiana tła
Mirosław Zelent
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ą).
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;
Polecamy: Sekurak Academy 2024
Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach! Dziękujemy Wam za poświęcony na to czas!
Disqus