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(https://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(https://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(https://localhost:8888/img/imac-flat.gif); background-repeat: no-repeat;

Alle CSS elementen

html en css voor beginnersWil jij ook leren hoe je je eigen website kunt maken?

Wil jij tips en tricks om zo goed mogelijk zelf met alles aan de slag te kunnen?
Meld je hieronder aan voor de HTML-site nieuwsbrief en krijg elke week handige tips om een website te bouwen.
En je ontvangt meteen mijn GRATIS ebook HTML & CSS voor Beginners.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.