Strona z nieruchomym tłem i powielanym pionowo obrazkiem.

powrót   

Poniżej jest zamieszczona tabela właściwości background związanych z tłem.

Nazwa deklaracjiKod w headKod w bodyOpis działania
background-atachment:fixedbody {background- atachment:fixed;}
Nic nie wpisujemy.Tło jest nieruchome względem przesuwanego tekstu.
background-atachment:scrollbody {background- atachment:scroll;}
Nic nie wpisujemy.Tło przesuwa się razem z tekstem.
background-repeat:
no-repeat
body {background- repeat:no-repeat;}
Nic nie wpisujemy.Tło (zdjęcie lub tapeta) jest wyświetlana pojedyńczo.
background-repeat:
repeat
body {background- repeat:repeat;}
Nic nie wpisujemy.Tło (zdjęcie lub tapeta) jest zwielokrotnione na cały ekran.
background-repeat:
repeat-x
body {background- repeat:repeat-x;}
Nic nie wpisujemy.Tło (zdjęcie lub tapeta) jest zwielokrotnione w poziomie.
background-repeat:
repeat-y
body {background- repeat:repeat-y;}
Nic nie wpisujemy.Tło (zdjęcie lub tapeta) jest zwielokrotnione w pionie.
background-position:(top,
center,bottom
left,center,right)
body {background- position:(top,center, bottom
left,center,right);}
Nic nie wpisujemy.Piersza wartość to wyrównanie w pionie, a druga w poziomie. top left znaczy "od góry i od lewej".
background-position:centerh5 {background- position:center;}
<h5>Piersza i druga wartość to < span class="red"> center</span></h5>.
Piersza i druga wartość to center.


Tak jak w przypadku czcionek można grupować właściwości związane z tłem, przestrzegając kolejności umieszczania słów kluczowych. Zamiast deklaracji background color, background-image... stosuje się właściwość background zgodnie z poniższą kolejnością:
  1. background-color
  2. background-image
  3. background-repeat
  4. background-atachment
  5. background-position
Na przykład kod w head może mieć postać: body {background: yellow url(../tlo.png) no-repeat fixed top center;}
(tło ma żółty kolor ze wstawionym obrazkiem nie powtarzającym się, nieruchomym względem strony, umieszczonym u góry i centralnie).

Kod tej strony zamieszczony w head.

body {
background-color:FFFFCC;
background-image:url(../css.png);
background-position:top center;
background-repeat:repaet-y;
background-atachment:fixed;}

p {background-color:D5E0A3;
width:350px;}


do góry    powrót