Ustalenie rozmiaru obrazka tła

Tradycyjnymi metodami nie można zmieniać rozmiaru obrazka wstawionego w tle. Aby tego dokonać, trzeba posłużyć się pewną "sztuczką". Na tej stronie nie zostało ustalone żadne tło obrazkowe. Został tutaj wstawiony normalny obrazek za pomocą znacznika <img />. Dzięki temu można ustalić jego wymiary. Obrazek ten został następnie poddany pozycjonowaniu absolutnemu i nałożony pod właściwą treścią strony. Dzięki temu wygląda jak tło, ale faktycznie nim nie jest.

Aby przekonać się, że obrazek w tle tej strony rzeczywiście dopasowuje się automatycznie, spróbuj zmienić rozmiar okna przeglądarki.

Ten sposób nie jest jednak złotym środkiem na automatyczne dopasowywanie wymiarów obrazka w tle do rozmiarów okna przeglądarki. Jakakolwiek zmiana rozmiarów grafiki powoduje wyraźną utratę jej jakości. W przypadku powiększania otrzymujemy duże, zauważalne piksele, z których zbudowany jest obraz cyfrowy. W przypadku pomniejszania widoczne są zniekształcenia. Ponieważ w tym przypadku obraz jest skalowany nieproporcjonalnie, dodatkowo będzie on rozciągnięty w poziomie lub pionie, co wywoła nienaturalny wygląd. Poza tym w niektórych przeglądarkach mogą wystąpić problemy z przewijaniem strony za pomocą rolki myszki lub też może pojawić się podwójny pionowy suwak.

Aby uzyskać taki efekt, należy posłużyć się następującym kodem:

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl" style="height: 100%">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body style="margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden">

<div style="position: absolute; z-index: 2; width: 100%; height: 100%; overflow: auto">
	<div style="margin: 10px">

Tu wpisuje się treść strony

	</div>
</div>

<div><img src="obrazek.jpg" alt="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1" /></div>

</body>
</html>

Poniżej tekst "wypełniacz" - nie warto czytać :-)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.

Fusce in arcu ultricies tortor volutpat tristique. Curabitur condimentum odio id orci. Donec fringilla metus et enim. Nam feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut libero non purus mattis adipiscing. Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo. Mauris a metus. Nam venenatis pede at lorem. Morbi at neque. Proin consequat magna vitae est. In suscipit. Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus. Proin posuere. Proin dignissim nisi vitae magna. Etiam ac lectus. Nunc placerat laoreet erat. Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.