Arkusze stylów dają nam możliwość łatwego wybrania tła dla elementów html. Możemy, określić kolor, ścieżkę do obrazka, określić jego pozycję wewnątrz elementu a nawet połączyć te wszystkie metody dla uzyskania jak najlepszego efektu. Poniżej przedstawiam listę atrybutów związanych z tłem w CSS.
Kolor tła możemy określić w następujący sposób:
selektror {
background-color: green;
}
Po wpisaniu takiego kodu tło elementów pasujących do wybranego selektora stanie się zielone. Do dyspozycji mamy trzy sposoby:
Jeżeli zajdzie taka potrzba, jako tła zawsze możemy użyć obrazka, podając jego ścieżkę:
selektor {
background-image: url('nazwa_obrazka.jpg');
}
Taki zapis spowoduje podstawienie obrazka o nazwie nazwa-obrazka.jpg w tle wybranego elementu, bądź grupy elementów html określonych przez selektor. Obrazek będzie wyświetlany w skali 1:1 niezależnie od wielkości elementu, którego jest tłem. Jeżeli element będzie większy od obrazka, ten będzie się powielał aż do wypełnienia całej przestrzeni, w przeciwnym wypadku zobaczymy zaledwie jego fragment. Cechy te możemy oczywiście kontrolować poprzez pozostałe atrybuty oferowane nam przez język CSS.
Obrazki musimy wskazywać względem lokalizacji pliku CSS. Jeżeli obrazek znajduje się w folderze “images” należy wpisać ścieżkę w postaci ./images/nazwa_obrazka.jpg. Jeżeli obrazek jest niżej w strukturze folderów niż plik css napiszemy ../nazwa_obrazk.jpg.
Jeżeli z jakiegoś powodu zajdzie potrzeba, pozbycia się obrazka z tła, nadanego przez jakąś inną klasę możemy skorzystać z zapisu background-image: none;
Jak już wspomnieliśmy wcześniej standardowo w przeglądarkach jeżeli nie zostało nigdzie ustalone inaczej obrazek będzie powielany do wypełnienia całej przestrzeni elementu, dla którego został ustawiony. Pisałem też, że cechę tą możemy kontrolować.
Jeżeli chcemy mieć pewnosć, że jakaś “egzotyczna” przeglądarka nie nadpisze innego ustawienia domyślnego, ani wartość nie zostanie odziedziczona z innego slektora powinnismy wpisać kod backgorund-repeat: repeat;
Przykład pokazujący jak pozbyć się powielania obrazka:
selektor {
background-image: url('nazwa_obrazka.jpg');
background-repeat: no-repeat;
}
Po dodaniu deklaracji z atrybutem background-rpeat o wartości no-repeat tło zostanie wyswietlone tylko raz od lewego górnego rogu o ile oczywiście w żadnej innej części kodu nie jest ustanowione inaczej.
Jeżeli chcemy obrazek może powielać się tylko w jednej osi. Zależnie od wyboru można podać wartość repeat-x bądź repeat-y Np. tak:
selektor {
background-image: url('nazwa_obrazka.jpg');
background-repeat: repeat-x;
}
Niezależnie od tego czy ustawiliśmy obrazek w tle i w jaki sposób to zrobiliśmy warto zastanowić się co stanie się w przypadku kiedy z jakiegos powodu ten się nie wczyta. Aby uniknąć potencjalnego efektu niewidzialnego tekstu warto poza obrazkiem ustawić jednocześnie kolor tła, który będzie gwarantem czytelności naszej treści.
Czasami może pojawić się potrzeba, żeby obrazek pojawił się raz, ale w innym rogu elementu zawierającego, niż ma to miejsce domyślnie. Czasami, możemy chcieć, aby aby obrazek powielał się w pionie, ale 20 pixeli do lewej krawędzi elementu. Z pomocą w takich sytuacjach śpieszy nam atrybut background-position.
selektor {
background-image: url('nazwa_obrazka.jpg');
background-repeat: no-repeat;
background-position: right bottom;
}
Taki zapis spowoduje zmianę pozycji wyświetlenia obrazka z domyślnego lewego górnego rogu na prawy dolny. Pierwsza wartość określa wyrównanie w osi x a druga w y. W osi x można przyjąć wartości left (lewo), center (środek) right (prawo). W osi y natomiast top (góra), center (środek) i bottom (dół). A oto lista wszystkich możliwych pozycji:
