Tło na całą stronę - CSS3 + Flash + tabelki

W momencie pojawienia się szybkich łącz zaistniała możliwość umieszczania coraz to większych (i cięższych w bajtach) zdjęć na stronach. Jedną z ciekawszych metod designerskich jest umieszczenie obrazka w tle - rozciągniętego na całą stronę. Przykładem strony nie zrobionej we Flashu, w której zastosowano rozciąganie tła jest Go To China. Innym rozwiązaniem - bardziej wydajnym jest zrobienie tylko komponentu tła we Flashu, zaś najnowszym - zastosowanie CSS3.

Poniżej krótko przedstawiłem trzy metody rozszerzania tła:

• Tabele i CSS2
• Flash
• CSS3

Tabele i CSS2

Biorąc przykład z podanej wcześniej strony pokrótce zaprezentuję jak może działać tabelka w celu rozciągnięcia tła na cały ekran. Główną zasadą działania jest rozciąganie obrazka na tabelkach, których szerokość jest równa 200%. Pewnym problemem jest zastosowanie właściwości min-width i min-height, które jak wiadomo nie działają w IE6. Na szczęście samo zassanie biblioteki MooTools pozwala wyeliminować te niedogodności - tak też zrobili na wspomnianej wyżej stronie. Oto przykład:

Pewnym minusem tego rozwiązania jest to, że w celu umieszczenia zawartości strony musimy tworzyć nową warstwę - najlepiej na position:absolute i dopiero na niej umieścić scroll-bary - overflow:auto itp. Drugim minusem jest umieszczenie struktury, która jest nijak związana ze strukturą strony - nie wiadomo jak google to potraktuje ;)

Poniżej kod oraz struktura do zrobienia tła na tabelkach.

<div id="bg">
    <div>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img src="img/bg.png" alt=""/>
                </td>
            </tr>
        </table>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}

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

#bg {
    position: fixed;
}

#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%;
}

Flash

W celu zwiększenia wydajności możemy wsadzić w tło strony element Flash'owy, który pomimo osadzenia w trybie opaque i tak zapewnia większą wydajność niż rozciąganie na tabelce. Element tabelki i tak można zostawić w kodzie strony dla przeglądarek bez Flash'a (np. mobilne), natomiast w momencie wskazywania elementu, gdzie ma być umieszczone tło można wskazać węzeł nadrzędny od tabelki co spowoduje jej zastąpienie przez obiekt flash'owy.

Jedną z przykładowych bibliotek jest as3-fullscreen-lib. Przygotowany kod można wykorzystać w darmowej aplikacji FlashDevelop i skompilować w darmowym Flex SDK. Więcej na temat konfiguracji można znaleźć na stronie Akademia Pana Flexa. Wskazany biblioteka oprócz obrazków obsługuje także umieszczanie plików wideo - miłej zabawy :)

Screen z filmu dostarczonego w przykładach do biblioteki

CSS3

W CSS3 skorzystamy z właściwości background-size: cover, która pokrywa tłem całą warstwę. Jedynym mankamentem jest to, że nie działa to poprawnie na element body (tło nie rozciąga się w poziomie), więc pozostaje nam stworzyć warstwę ze stylem position:absolute oraz szerokością i wysokością na 100% i w ten komponent wciskać całą zawartość. Zaletą tego rozwiązania jest to, że nie ma to błędów semantycznych jak w tabelce ale nie działa w IE (co było do przewidzenia).

div.bg {
 background: url(dscf5495.jpg) no-repeat center;
 background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 display:block;
 width:100%;
 height:100%;
 position:absolute;
 overflow:auto;
}

Przykład rozciągnięcia tła z użyciem CSS3 w Google Chrome

Na koniec chciałem wspomnieć, że istnieją także możliwości kontroli szerokością tła poprzez JavaScript - jednak nie jest to praktyczne, ponieważ zdarzenie onresize reaguje wolniej niż we Flash'u, no a tym bardziej w CSS3 czy tabelkach - przy czym wydajnościowo także to rozwiązanie jest najgorsze.