Afbeeldingen verwerken in de css.

Bron: http://www.sceneone.nl/afbeeldingen/in_css.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Met css heb je de mogelijkheid om een afbeelding die je niet in je html nodig hebt ook niet in je html te zetten. Je kunt afbeeldingen als achtergrond afbeeldingen opnemen in de css.
En da's mooi, want plaatjes die puur voor decoratie zijn (en dat zijn de meeste) horen niet in de markup (html) maar in de css.
Het kan best voorkomen dat je om technische redenen niet anders kunt dan een decoratieve afbeelding in je markup zetten en dat is natuurlijk ook niet zo'n ramp. Maar in principe moet je proberen dat zo veel mogelijk te voorkomen.

Als je deze pagina bekijkt zie je toch aardig wat afbeeldingen, zeker als je alle schaduw effecten meerekend. Als je naar de code van deze pagina kijkt zul je zien dat daar geen plaatje in voorkomt. Alle afbeeldingen zijn decoratief en zitten in de css.
Een eenvoudig voorbeeld:

CSS: div#afbeelding{
background: #D3E6CF url(../_img/para.jpg) no-repeat 0 0;
height: 300px;
width: 225px;
border: 5px solid #618059;
}
HTML: <div id="afbeelding"></div>

bekijk het resultaat

Opbouw van de stijlregel 'background'

Ik heb de stijlregel background hier geschreven in shorthand, dus nu even wat uitleg over de verschillende elementen van deze stijlregel
Je begint met de achtergrondkleur, is niet verplicht. Mag je ook weglaten.
Daarna volgt het pad naar je afbeelding
Dan geef je aan of de afbeelding zichzelf moet herhalen. De waarde hiervan kan zijn: no-repeat, repeat, repeat-x (herhaalt zichzelf alleen horizontaal), repeat-y (herhaalt zichzelf alleen vertikaal).
Als laatste geef je de coördinaten waar de afbeelding moet beginnen op (eerst de horizontale coördinaat, dan de vertikale). Dit kan ook zijn: top, right, bottom, left, center.

Nog een voorbeeld:

CSS: div#afbeelding{
background: #A0DCF8 url(../_img/vb_bg.gif) repeat-x 0 100px;
height: 300px;
width: 225px;
border: 1px solid #539DBC;
}
HTML: <div id="afbeelding"></div>

bekijk het resultaat

En nog een voorbeeld in combinatie met tekst:

CSS: div#afbeelding{
background: url(../_img/duiken2.jpg) no-repeat top left;
height: 248px;
width: 300px;
border: 1px solid #000;
padding: 0 5px 0 155px;
}
HTML: <div id="afbeelding"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div>

bekijk het resultaat

Achtergrond afbeelding in de body

In de voorgaande voorbeelden gebruik ik een achtergrond afbeelding in een div. Vaak zul je een achtergrond afbeelding in de body van een pagina willen plaatsen. Dat kan natuurlijk ook. Je hebt zelfs nog een extra eigenschap tot je beschikking wanneer je een achtergrond afbeelding in de body zet, namelijk 'fixed':

CSS: body{
margin: 0;
background: #A0DCF8 url(../_img/vb_bg.gif) fixed repeat-x 0 100px;
}

p{
width: 300px;
margin: 10px 0 0 50px;
}
HTML: <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>

bekijk het resultaat

Je ziet dat de achtergrond afbeelding gefixeerd is terwijl de tekst er overheen scrolled.
Let op: de eigenschap fixed kun je alleen gebruiken in de body. Voor andere elementen wordt deze eigenschap niet ondersteund.

De voorbeelden en uitleg die ik je hier geef is natuurlijk nog maar het begin. Het helpt je op weg.
Zelf verder experimenteren en proberen is dé manier om meer te leren. En als je er niet uitkomt zijn er altijd websites en/of forums waar je de oplossing voor je probleem kunt vinden. Is het niet hier dan is het wel ergens anders.

naar het begin van de pagina