Hoe voeg ik een achtergrondafbeelding toe aan mijn website?
Jeroen Hoekstra |
2005-03-08 |
Programmeren en techniek
Dit kun je op verschillende manieren doen. We zullen eerst laten zien hoe je dit doet in HTML. Stel, je wilt het logo van je site als achtergrondafbeelding hebben op een pagina. Hieronder staat een simpel voorbeeld van een site:
<html>
<head>
<title>Achtergrond</title>
</head>
<body background="LocatieLogo/logo.gif">
Deze pagina zal je logo als achtergrond hebben.
</body>
</html>
Een andere manier is om het met CSS (Cascading Style Sheets) te doen. We zullen hier het bovenstaande voorbeeld hanteren:
<html>
<head>
<title>Achtergrond</title>
<style>
body {
background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg);
}
</style>
</head>
<body>
Deze pagina zal je logo als achtergrond hebben.
</body>
Twee mogelijke problemen doen zich nu voor, namelijk:
- De afbeelding staat niet vast t.o.v. de inhoud van de pagina.
- De afbeelding wordt zowel van links naar rechts als van boven naar onderen herhaald.
We zullen eerst gaan kijken naar het eerste probleem. Wanneer je nu gaat scrollen met je pagina zul je dus zien dat de afbeelding mee beweegt. Dit kan door de bezoekers van je site als hinderlijk worden beschouwd. Ook dit is op te lossen m.b.v. zowel HTML als met CSS.
Met HTML gaat het op de volgende manier:
Vervang de regel:
<body background="LocatieLogo/logo.gif">
door:
<body background="LocatieLogo/logo.gif" bgproperties="fixed">
Met CSS gaat het op de volgende manier:
Vervang het volgende gedeelte:
<style>
body {
background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg);
}
door:
<style>
body {
background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg);
background-attachment: fixed
}
Wanneer je nu gaat scrollen met je pagina, zul je zien dat de afbeelding vast staat t.o.v. de inhoud van de desbetreffende pagina. Mogelijke waarden voor background-attachment zijn dus:
- scroll (afbeelding beweegt met de inhoud van de pagina mee)
- fixed (afbeelding staat vast)
Ook voor het tweede probleem is een oplossing te vinden. Je wil natuurlijk dat de afbeelding maar één keer verschijnt. Het mooie van CSS is dat je kunt opgeven of en hoe je de afbeelding kunt laten herhalen:
Vervang het volgende gedeelte:
<style>
body {
background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg);
background-attachment: fixed
}
door:
body {
background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg);
background-attachment: fixed;
background-repeat: no-repeat
}
Met background-repeat kun je dus een achtergrondafbeelding op verschillende manieren laten herhalen, namelijk:
- no-repeat (geen herhaling)
- repeat-x (plaatje wordt horizontaal herhaald)
- repeat-y (plaatje wordt vertikaal herhaald)
- repeat (plaatje wordt zowel horizontaal als vertikaal herhaald)
Je kunt de achtergrondafbeelding ook nog op verschillende manieren positioneren binnen de pagina m.b.v. background-position.
Vervang het volgende gedeelte:
<style>
body {
background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg);
background-attachment: fixed;
background-repeat: no-repeat
}
door:
<style>
body {
background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center
}
De afbeelding wordt nu gecentreerd weergegeven. Andere waarden voor background-position zijn:
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
- x-% y-% (positie van de afbeelding in procenten, bv. background-position: 0% 0%; Dit is de linkerbovenhoek)
- x-pos y-pos (positie van de afbeelding in cm, px of pt, bv. background-position: 10px 10px;)Probeer het maar eens uit!
Veel succes!
