Tło

Najskuteczniejszym sposobem upiększania elementów za pomocą CSS jest nadawanie im tła. Ta właściwość jest używana bardzo często, nie tylko do tła strony, ale również do tła najróżniejszych elementów (np. graficzne przyciski, elementy menu, zaokrąglone rogi, a czasem nawet wypunktowania list).

Tło wypełnia elementy do zewnętrznej krawędzi obramowania. Bug w IE

Tło jednolite: background-color

Przyjmuje dowolny kolor, którym zostanie wypełnione wnętrze elementu. Wartość transparent oznacza przezroczyste tło.

Najlepiej używać skróconego zapisu np.:

 background: #f00; 

Nada stronie czerwone tło.

Gdy ustawiasz kolor tła, to staraj się też ustawiać kolor tekstu, żeby uniknąć sytuacji, kiedy przez kaskadę tekst dostaje kolor nieczytelny na danym tle.

Grafika

O ile to możliwe, ustawiaj kolor tła zawsze, gdy ustawiasz grafikę. W ten sposób element będzie miał widoczne tło zanim załaduje się grafika.

Każdy element może mieć ustawioną grafikę jako tło. Grafika nie wyklucza jednolitego koloru tła — jest rysowana nad nim.

Plik graficzny: background-image Bug w IE

Możesz przyspieszyć ładowanie strony umieszczając grafikę przy pomocy kodowania base64.

Wskazuje (za pomocą funkcji url()) ścieżkę do pliku graficznego. Ścieżka jest zawsze względna do lokalizacji arkusza stylów.

 background-image: url(ciapki.png)

W obecnej wersji CSS jeden element może mieć tylko jedno tło. Jeśli chcesz nałożyć na siebie więcej grafik (żeby zrobić np. zaokrąglone rogi w elemencie o zmiennej wielkości), musisz stworzyć dodatkowe zagnieżdżone elementy w XHTML (np. <div>) i nadać tło każdemu z nich.

Powtarzanie: background-repeat

repeat
Grafika jest powtarzana, aby wypełniła całą powierzchnię tła. To jest domyślne zachowanie.
repeat-x
Grafika jest powtarzana tylko w poziomie. Wypełnia całą szerokość, ale nie wysokość.
repeat-y
Grafika jest powtarzana tylko w pionie. Wypełnia całą wysokość, ale nie szerokość.
no-repeat
Grafika jest wstawiana tylko w jednym miejscu.

W zależności od powtarzania, grafika może mieć bardzo różne zastosowanie.

Można wstawić tylko pojedynczą grafikę (no-repeat) i zarezerwować na nią miejsce za pomocą padding — tekst nie będzie na nią wchodził, jakby to był zwykły obrazek.

Można robić ozdobne krawędzie i cienie za pomocą repeat-xrepeat-y.

 background-image: url(zaokraglony-rozek.png);
 background-repeat: no-repeat;

Pozycja grafiki: background-position Bug w IE

Kolejność współrzędnych background-position jest odwrotna, niż w skróconym zapisie właściwości takich, jak marginpadding.

Ustala na raz poziomą i pionową pozycję grafiki. Lewy górny róg jest domyślną wartością.

Dla wartości absolutnych (w pikselach) oznacza odsunięcie lewej górnej krawędzi grafiki od lewej górnej krawędzi tła.

Dla wartości w procentach oznacza odsunięcie o x procent punktu, który jest w x procent wymiaru grafiki. Dla 0% wyrównuje lewą krawędź grafiki z lewą krawędzią tła, dla 50% równo środkuje, a dla 100% wyrównuje prawą krawędź grafiki do prawej krawędzi tła.

 background-position: 0 0;
 Lewy górny róg. To są wartości domyślne.

 background-position: 100% 100%;
 Prawy dolny róg.

 background-position: 10px 5px;
 Grafika odsunięta o 10 pikseli od lewej i o 5 pikseli od góry.

 background-position: 50% 0;
 Grafika umieszczona na górze i wyśrodkowana w poziomie.

Nie da się odsunąć grafiki o określoną ilość pikseli od prawej lub dolnej krawędzi. Jeśli potrzebujesz uzyskać taki efekt, wstaw odpowiednią ilość pustego miejsca do grafiki i użyj 100% jako pozycji.

Przesuwanie grafiki: background-attachment Bug w IE

position:fixed pozwala unieruchomić całe elementy

fixed
Tło pozostanie nieruchome względem okna przeglądarki, zobacz Complex Spiral.
scroll
Tło przesuwa się razem ze stroną. To jest domyślne zachowanie.

Rozwinąć

Skrócony zapis właściwości tła: background

Wszystkie powyższe właściwości najlepiej ustawiać wszystkie na raz za pomocą właściwości background:

 background: #f00 url(foo.png) 5px 100% no-repeat;

Nie trzeba podawać wszystkich parametrów. Kolejność jest dowolna. Pominięte parametry przyjmą wartości domyślne.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.


Zmodyfikowano: 31.08.2011, 02:26
submit