background-image

Voor het bepalen van de achtergrond van een volledige website, of van een individueel element gebruik je in CSS het element ‘background-image’. Het beste kun je dit gebruiken samen met ‘background-repeat’ en ‘background-position’, waarover later meer. Nu dus een achtergrond afbeelding in CSS op zondag.

De waarden van background-image
Er zijn drie waarden voor dit element. De eerste waarde is ‘none‘. Hiermee geef je aan dat er geen afbeelding is. De tweede waarde is de overerving, ‘inherit‘. De derde waarde is eigenlijk de belangrijkste, namelijk de URL waar de afbeelding te vinden is. Dit kan zowel een absoluut URL zijn (bijv. http://localhost:8888/img/plaatje.jpg) of een relatieve URL (bijv. /img/plaatje.jpg). Deze waarde pas je als volgt toe: background-image: url(http://localhost:8888/img/plaatje.jpg);

Standaardinstelling
De standaardinstelling voor background-image is ‘none’.

Voorbeelden
body {background-image: url(img/plaatje.jpg);}
div {background-image: url(http://localhost:8888/img/logo.jpg);}

In dit element is een achtergrondplaatje opgenomen. Zoals je ziet gaat de tekst er gewoon overheen. De code hiervoor is background-image: url(http://localhost:8888/img/imac-flat.gif); background-repeat: no-repeat;

Alle CSS elementen

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *