home

background-image

syntax : background-image:url('url');

Met het gebruik van background-image in css kan men afbeeldingen als achtergrond van een HTML element laten weergeven.

Deze "achtergrond-afbeelding" wordt veel gebruikt om bijvoorbeeld een "li" in een unordered list van een pijltje iod. te voorzien, maar ook om bijvoorbeeld een gehele pagina van achtergronden te voorzien door aan het "div" element cq. elementen op een webpagina een background-image toe te voegen.

background-image voorbeeld

Een voorbeeld van het gebruik van een background-image hieronder:

<div style="background-image:url('imgs/h1.png');width:40px;height:30px;"></div>

ziet er als volgt uit in uw browser programma :

In dit voorbeeld is de css even inline gebruikt, beter is het gebruik van een aparte stylesheet, hierdoor zou de betreffende div eventueel een unieke id hebben kunnen krijgen.

voorbeeld 2: (background-image met externe stylesheet met javascript effect).

<html>
<head>
<style>
#bgef{
background-image:url('imgs/h1.png');
width:40px;
height:30px;
}
</style>
</head>
<body>
<div id="bgef" onMouseover="this.style=background='white';"
onMouseout="this.style.backgroundImage='url(imgs/h1.png) ></div>
</body>
</html>