BACKGROUND IMAGE SIZE

24 kwietnia 2009, 16:22

Tym razem coś z tzw. innej beczki: niedawno szukałem rozwiązania, które umożliwiałoby emulację planowanej dopiero w CSS3 własności background-size. Okazało się, że takich rozwiązań jest wiele, żadne jednak nie spełniało wymagań:

• rozciąganie obrazka na całą szerokość strony,
• dostosowanie rozmiaru pionowego tła do faktycznego rozmiaru dokumentu,
• rozmiar tła dostosowujący się dynamicznie do rozmiaru okna przeglądarki.

Właściwe rozwiązanie – wykorzystujące jQuery, choć możliwe do zrealizowania także w czystym JS – okazało się proste; publikuję je jednak, bo może komuś oszczędzić kilkunastu minut kombinowania.

__________

1. Pierwszym elementem dokumentu (X)HTML powinien być div o identyfikatorze background; właściwą zawartość umieszczamy wewnątrz diva main:

<div id="background"><img src="..." alt="" /></div>
<div id="main">(...)</div>

2. W arkuszu CSS definiujemy następujące style dla diva background:

#background {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -10;
	overflow: hidden;
}

#background img {
	width: 100%;
}

3. W sekcji HEAD, poniżej (!) deklaracji link rel=”stylesheet”, umieszczamy następujący kod JS:

<script type="text/javascript">
$(document).ready(function(){

	var bgSizeCalc = function(){
		var pageH = $('#main').height();
		var browserH = $(window).height();
		var bgH = 0;
		if (pageH > browserH) bgH = pageH+30;
		else bgH = browserH;

		return bgH;
	};

	$('#background').height(bgSizeCalc());		

	$(window).resize(function(){
		bgH = bgSizeCalc();
		$('#background').height(bgH);
	});
});
</script>

__________

To wszystko. Efekty działania można zobaczyć tutaj.