logo
  Background image
  Een achtergrond plaatje op je site zetten is niet zo moeilijk: background: #EDF6FF url(jou-achtergrond) no-repeat fixed;
background-position: center;

Zoals je ziet laat ik hem niet herhalen (no-repeat), wil je hem wel herhalen, dan schrijf je alleen repeat. Wil je hem alleen verticaal herhalen dan schrijf je repeat-y en voor horizontaal repeat-x.

Je kan ook de image op drie manieren op elke gewenste plek zetten:

background: #EDF6FF url(jou-achtergrond) no-repeat fixed;
background-position: top left;

background: #EDF6FF url(jou-achtergrond) no-repeat fixed;
background-position: 0px 0px;

De background komt nu in de linker bovenhoek

De laatste was gemaakt in px en daar kan je veel meer mee, want daarmee kan je een image een positie geven bv 30px 60px.

Nou had ik geschreven drie mogelijkheden en de volgende is eventjes apart gedaan, want die werkt met %.

background: #EDF6FF url(jou-achtergrond) no-repeat fixed;
background-position: 60% 80%;

Hier zit een groot voordeel aan en dat heeft met de schermresolutie van jou bezoeker te maken. Stel; jij hebt een schermresolutie van 800 X 600 en je gebruikt 790px 590px, dan staat de image bij jou rechts onderaan. Maar nu komt jou bezoeker en die heeft een schermresolutie van 1600 X 900... je raad het al... jou image staat niet waar hoort te staan.
Doe je dit nu met % dan staat ie precies waar jij hem wilt hebben ongeacht de schermresolutie.

Heb je bijvoorbeeld een table met een vaste breedte van bijvoorbeeld 400px breed en je wilt hem daar in zetten en je wilt hem een beetje rechts onder zetten, dan kan je beter de px gebruiken.

Zoals je zag staat er ook 'fixed' bij. Fixed houdt in dat de image 'vast' staat. Als je scrollt dan blijft hij daar staan waar hij staat en blijf je hem altijd in beeld houden.
Wil je dat het plaatje met de tekst mee gaat, dan maak je van fixed scroll.

repeat herhaal alles
repeat-x herhaal horizontaal
repeat-y herhaal verticaal
no-repeat geen herhaling

 
eind