CSS Achtergronden
In dit hoofdstuk leer je hoe je meerdere achtergrondafbeeldingen aan een element kunt toevoegen.De volgende eigenschappen worden besproken:
- background-size
- background-origin
- background-clip
Meerdere achtergronden
CSS biedt verschillende eigenschappen om de achtergrond van een element aan te passen zoals meerdere achtergronden toe te voegen aan een element. De verschillende achtergrondafbeeldingen worden gescheiden door komma's en de afbeeldingen zijn op elkaar gestapeld.Het volgende voorbeeld heeft twee achtergrondafbeeldingen, de eerste afbeelding is een vlinder (uitgelijnd onder en rechts) en de tweede afbeelding is een donkere achtergrond (uitgelijnd in het midden):
Voorbeeld:
#box {
background-image: url(images/vlinder.png), url(images/bg_dark.png);
background-position: right bottom, center;
background-repeat: no-repeat, repeat;
}
Background shorthand
Zoals je in de bovenstaande voorbeeld kunt zien, zijn er veel eigenschappen waarmee je rekening moet houden bij het omgaan met de achtergronden. Het is echter ook mogelijk om al deze eigenschappen in één enkele declaratie op te nemen om de code in te korten en om extra typen te voorkomen. Dit wordt een shorthand eigenschap genoemd.
Voorbeeld:
#box {
background: url("images/vlinder.png") no-repeat right bottom, url("images/bg_dark.png") repeat center;
}
CSS background size
Met de eigenschapbackground-size kun je de grootte van een achtergrondafbeelding opgeven. De grootte kan worden opgegeven in pixels en percentages of door één van de twee trefwoorden te gebruiken: contain of cover. In het volgende voorbeeld wordt de achtergrondafbeelding kleiner gemaakt:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Voorbeeld:
#voorbeeld1 {
border: 1px solid black;
background: url(images/sun.png);
background-size: 100px 80px;
background-repeat: no-repeat;
padding: 15px;
}
De twee andere mogelijke waarden voor achtergrondgrootte zijn contain en cover.
| Het trefwoord contain schaalt de achtergrondafbeelding zo groot mogelijk (zowel de breedte als de hoogte moeten binnen het inhoudsgebied passen). |
| Met het trefwoord cover wordt de achtergrondafbeelding geschaald zodat het inhoudsgebied volledig wordt bedekt door de achtergrondafbeelding (zowel de breedte als de hoogte zijn gelijk aan of groter dan het inhoudsgebied). |
Voorbeeld:
.div1 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(images/vlinder.png);
background-repeat: no-repeat;
background-size: contain;
}
.div2 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(images/vlinder.png);
background-repeat: no-repeat;
background-size: cover;
}
 |
De grootte kan worden opgegeven in pixels en percentages of door één van de twee trefwoorden te gebruiken: contain of cover. |
Achtergrondafbeelding formaten wijzigen
De eigenschapbackground-size accepteert ook meerdere waarden voor de achtergrondgrootte, je kunt de waarden met komma's scheiden wanneer er met meerdere achtergronden wordt gewerkt.
In het volgende voorbeeld zijn drie achtergrondafbeeldingen opgegeven, met voor elke afbeelding een andere achtergrondgrootte:
Voorbeeld:
#box {
background: url(images/birds.png) no-repeat center, url(images/clouds.png) no-repeat center, url(images/sun.png) no-repeat 10% 30%, lightblue;
background-size: 250px, auto, 130px;
}
Achtergrondafbeelding op volledige grootte
Als je een achtergrondafbeelding op je website wilt plaatsen dat de hele browservenster bedekt en ook nog eens automatische de hoogte en de breedte aanpast dan gaan we als volgt te werk.
Voorbeeld:
html {
background: url(images/fullcover.jpg) no-repeat center fixed;
background-size: cover;
}
Background-origin eigenschap
De eigenschapbackground-origin kan worden gebruikt om het positioneringsgebied van de achtergrondafbeeldingen op te geven.
De eigenschap kent drie verschillende waarden:
| border-box | - | De achtergrondafbeelding begint vanuit de linkerbovenhoek van de rand. |
| padding-box | - | De achtergrondafbeelding begint vanuit de linkerbovenhoek van de vullingrand (padding). Dit is de standaard waarde. |
| content-box | - | De achtergrondafbeelding begint vanuit de linkerbovenhoek van de inhoud. |
Voorbeeld:
#voorbeeld1 {
width: 250px;
height: 150px;
padding: 35px;
border: 6px dashed #333;
background: url(images/sky.jpg);
background-repeat: no-repeat;
background-origin: border-box;
}
|
De eigenschap background-origin wordt genegeerd als de waarde van de eigenschap background-attachment is opgegeven als 'fixed'. |
Background-clip eigenschap
De eigenschapbackgroud-clip kan worden gebruikt om aan te geven of de achtergrond van een element zich uitstrekt in de rand of niet. De eigenschap backgroud-clip kan de volgende drie waarden aannemen:
border-boxpadding-boxcontent-box
Voorbeeld:
#voorbeeld1 {
width: 250px;
height: 150px;
padding: 35px;
border: 6px dashed #333;
background: orange;
background-clip: padding-box;
}
