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