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

Als je dit een interessant
artikel vond…

wil je vast ook mijn NIEUWSBRIEF!
Iedere week weer een nieuw ARTIKEL!

Krijg je binnenkort ook dit ebook met 101 inspirerende quotes van ondernemers!
ebook 101 quotes!

Auteur: Bjorn Simmering

Mijn naam is Bjorn Simmering en met deze website ga ik dus door het leven als Meneer Simmering. Ik schrijf over reizen, cadeaus voor mannen en meer... Lees meer over mij »

Geef een reactie

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