Podwójne tło na stronie

Niektóre projekty graficzne, potrafią przyprawić o gęsią skórkę nie jednego webdevelopera. Całkiem niedawno miałem kilka projektów, gdzie tło strony było dość problematyczne i osobę, która zaczyna zabawę z blokami zapewne by skutecznie zniechęciło – bo na tabelkach można dużo łatwiej.

Założenie jest takie: obrazek ten ma być stroną powitalną, znajdować się na środku strony oraz linkować do strony z zawartością. Dodatkowo po bokach mają się znajdować odpowiednie tła.
O ile z wyśrodkowaniem obrazka i wrzuceniem jednego z dwóch teł każdy sobie bez probemu poradzi, to z tym drugim tłem już niekoniecznie.
Po "tabelkowemu" sprawa wygląda prosto: tabelka, a w niej 3 kolumy (odpowiednio 25%, 50% i 25% szerokość), w pierwszej i ostatniej odpowiednia tła, w środkowej obrazek.

Do dzieła

Mamy poprawnie zbudowany dokument xHTML. Wstawiamy obrazek i tworzymy style.

<div id="drugieTlo"> </div>
<a href="link-do-serwisu.html"><img src="images/start.jpg" alt="" /></a>

Style wyglądają tak:

body,html {
background: url(pikselowe-tlo-lewe.jpg) repeat-x;
margin: 0;
text-align: center;
img { border: 0; } /* dla obrazków, gdy są one podlinkowane to pojawia się domyślny border */
}

Jako, że na stronie jest tylko obrazek, to od razu w body można wyśrodkować tekst.

Trik

Sztuczka polega na stworzeniu dodatkowego elementu z tłem, który będzie zajmował drugą połowę strony.
Dodajemy nowy element blokowy przed obrazkiem.

<div id="drugieTlo"> </div>

<a href="link-do-serwisu.html"><img src="images/start.jpg" alt="" /></a>

Teraz obrazkowi trzeba dodać artybut position: relative, aby mieć możliwość ustawienia kolejności wartsw. Atrybut z-index ustawiamy na 100.

img { position: relative; border: 0; z-index: 100; }

Teraz co pozostaje, to ostylować wspomniany wcześniej element blokowy.
Będzie miał takie właściwości: position:absolute, aby mieć możliwość umieszczenia go w dowolnym miejscu na stronie i ustawić mu kolejność wartsw, szerokość oraz wysokość.

#drugieTlo {
background: url(pikselowe-tlo-prawe.jpg) top repeat-x;
position: absolute;
z-index: 10; /* 10 jest mniejsze od 100, więc będzie pod obrazkiem */
width: 50%; /* połowa strony */
height: 300px; /* wysokość tła */
top: 0;
right: 0; /* dzięki tym dwom atrybutom, nasz div ląduje po prawej części strony */
}

Całość do zobaczenia pod adresem: http://blog.shpyo.net/sztuczki_css/podwojne_tlo/ - działa na Firefoxie, Internet Explorerze oraz Operze.