Achtergrond fixed

Ik kreeg laatst een vraag van iemand hoe je een achter grond fixed maakt en zich automatisch aan het scherm aanpast.

Ik weet dat dit eigenlijk een heel simpel trucje is, maar sommige gaan weer moeilijk doen met javascript.

<html>
<head>
<style type="text/css">
 body {
margin: 0 ;
 }

 img#background {
margin: 0 ;
position: fixed ;
left: 0 ;
top: 0 ;
width: 100% ;
height: 100% ;
z-index: -1 ;
 }
</style>
</head>
<body>
<img src="link/afbeelding.ext" alt="" id="background"/>

</body>
</html>

Uitleg
Als eerste zetten we de margin van het body element op nul, anders zal hij in sommig browsers een spleet geven tussen de rand van de browser en de afbeelding. Vervolgens zetten we de het plaatje op de achtergrond met de position fixed, samen met wat instellingen om hem over het hele scherm te krijgen.

Om het even wat interessanter te maken stel ik de eis dat de afbeelding er niet lelijk uit moet zien en dat ik nooit wil zien. Om hem minder lelijk te maken ga ik alleen de width 100% zetten, maar als ik het scherm te smal maak zal er wit zichtbaar worden.

De code wordt als volgt:

<html>
<head>
<style type="text/css">
 body {
margin: 0 ;
 }

 img#background {
margin: 0 ;
position: fixed ;
left: 0 ;
top: 0 ;
width: 100% ;
min-height: 100% ;
z-index: -1 ;
 }
</style>
</head>
<body>
<img src="link/afbeelding.ext" alt="" id="background"/>

</body>
</html>

Ik heb alleen height verandert naar min-height, dat betekend dat de minimale hoogt 100% van de hoogte van het scherm moet zijn. Door dit te doen ziet de afbeelding er mooier uit.

Er is ook een mogelijkheid om dit in css te doen, maar pas op dit werkt pas vanaf versie 3.0!

<html>
<head>
<style type="text/css">
 body {
background-image: url(link/afbeelding.ext) ;
background-position: left top;
background-repeat: no-repeat ;
background-attachment: fixed ;
background-size: 100% 100% ;
-o-background-size: 100% 100% ;
-webkit-background-size: 100% 100% ;
-khtml-background-size: 100% 100% ;
-moz-background-size:  100% 100% ;
 }
</style>
</head>
<body>
Inhoud
</body>
</html>

De laatste code werkt niet in alle browsers, omdat niet alle browsers css 3.0 ondersteunen.

background-attachment: fixed;

Is er ook hoor?

O, ja. Die moet nog in de laatste code. Met background-attachment zet je hem vast op de pagina ook als je scrolt.

Nice tut,
Vriend van mij had probleempje met achtergrond,,
heb hem dit vertelt en nu opgelost

Altijd handig