29-03-2008, 16:39
Przy wykorzystaniu stylów, w sekcji odpowiadającej za całość strony ogólnie (czyli body) zamieszczamy adres obrazka i określamy jego powtarzalność:
Tutaj dla przykładu, ładujemy plik tlo.jpg z folderu grafika
Natomiast linijkę niżej określamy, że ma się powtarzać (repeat).
Wtedy ten obrazek będzie tłem dla całej strony.
Możemy background-repeat odbroinę zmienić i nadać wartość repeat-x
Wtedy obrazek będzie sie powtarzał wzdłuż osi X, czyli poziomo, od lewej do prawej 
W przypadku zmiany na repeat-y obrazek będzie wyśweitlany tylko w pionie z gory na dół.
Można również zrobić aby tło wyświetlone zostalo raz i nie powtarzało się oraz żeby przesuwało się razem ze stroną. Efekt będzie taki, że użytkownik używając suwaka do przejścia w dół strony zobaczy, że przesuwa się strona i jej treść natomiast obrazek w tle będzie stał w miejscu.
Do tego służy:
Kod:
body {
margin: 0;
padding: 0;
color: #333333;
background: #FFFFFF url(grafika/tlo.jpg);
background-repeat: repeat;
text-align: center;
font-size: 13px;
letter-spacing: 1px;
}Tutaj dla przykładu, ładujemy plik tlo.jpg z folderu grafika
Natomiast linijkę niżej określamy, że ma się powtarzać (repeat).
Wtedy ten obrazek będzie tłem dla całej strony.
Możemy background-repeat odbroinę zmienić i nadać wartość repeat-x
Kod:
background-repeat: repeat-x;W przypadku zmiany na repeat-y obrazek będzie wyśweitlany tylko w pionie z gory na dół.
Można również zrobić aby tło wyświetlone zostalo raz i nie powtarzało się oraz żeby przesuwało się razem ze stroną. Efekt będzie taki, że użytkownik używając suwaka do przejścia w dół strony zobaczy, że przesuwa się strona i jej treść natomiast obrazek w tle będzie stał w miejscu.
Do tego służy:
Kod:
background-image: url('obrazek.gif');
background-repeat: no-repeat;
background-attachment: fixed;