Jak najlepiej wykorzystać zdjęcie jako tło strony WWW?

Specjaliści od usability zalecają, aby tło serwisu internetowego było proste, najlepiej jednobarwne. W niektórych witrynach jest jednak uzasadnione wykorzystanie w tym miejscu zdjęcia lub bardziej skomplikowanej grafiki. Jednak przy zmianie rozmiarów okna przeglądarki, często standardowo definiowane jako tła zdjęcia, nie wyglądają najlepiej. Jak sobie z tym poradzić?

Poniżej prezentujemy dwie metody na osiągnięcie tego celu. Pierwsza z nich wymaga wykorzystania elementu <table>, dlatego może nie spodobać się (X)HTML-owym purytanom.

Wyświetlanie zdjęcia jako tła przy pomocy tabelki

W sekcji <body> dokumentu umieszczamy następujący kod HTML:

Z kolei w podlinkowanym do dokumentu arkuszu stylów umieszczamy dyrektywy:

* {
margin: 0;
padding: 0;
}

html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}

#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}

#bg td {
text-align:center;
vertical-align:middle;
}

#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}

Aby strona wyświetlała się poprawnie, należy jeszcze umieścić w kodzie fragment odpowiadający za przywrócenie domyślnego stylu wyświetlania treści wraz z paskami przewijania:

Arkusz stylów uzupełnić zaś o następującą definicję:

.box {
margin: 0 auto;
width: 400px;
padding: 50px;
background: white;
padding-bottom:100px;
font: 14px/2.2 georgia, serif; // np. oczywiście tu mogą być inne czcionki
}

«poprzednia 1 2 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

skomentuj »