Scripts

Plaatje over de gehele achtergrond uitrekken

Door Jesper Diovo -15-12-2008 00:00 -19.161 views

Een tijdje geleden was er een vraag naar een manier om een plaatje op de achtergrond te zetten dat helemaal uitrekt. Via een simpele background-optie in CSS gaat dat niet. Nu heb ik een snippet van Jan Koehoorn - over een plaatje over de gehele pagina uitrekken - uitgebreid naar een plaatje over de achtergrond geheel uitrekken, dat je daaroverheen nog je website kan maken. Het is echt heel simpel, maar voor beginners soms toch nog wel lastig om tot deze oplossing te komen. Ohja, succesvol getest in FireFox 3.0, Safari en Opera. IE6.0 en Netscape Navigator 9 deden moeilijk....

Download alle bestanden als ZIP

plaatje-over-de-gehele-achtergrond-uitrekken

CSS:
[code]
	body {
		margin: 0;
		padding: 0;
	}
	
	img.bg {
		z-index: -9000;
		width: 100%;
		height: 100%;
		position: fixed;
	}
	
	div.site {
		position: absolute;
	}
[/code]

HTML, tussen <body> en </body>:
[code]
<img src="urlnaarjeplaatje.jpg" border="0" class="bg" />

<div class="site">
  hier alles van je website
</div>
[/code]

Je zou aan div.site nog wel bepaalde margins en/of paddings moeten geven, doordat body op 0 wordt gezet staat de inhoud tegen de rand aan. ;-)