HTML- achtergrondafbeeldingen
Voor bijna elk HTML-element kan een achtergrondafbeelding worden opgegeven.
Achtergrondafbeelding op een HTML-element
Gebruik het HTML- styleattribuut en de CSS - background-imageeigenschap om een achtergrondafbeelding toe te voegen aan een HTML-element:
Voorbeeld
Voeg een achtergrondafbeelding toe aan een HTML-element:
<div style="background-image: url('img_girl.jpg');">
<style>
U kunt ook de achtergrondafbeelding in het element specificeren , in de <head>
sectie:
Voorbeeld
Specificeer de achtergrondafbeelding in het <style>
element:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Achtergrondafbeelding op een pagina
Als u wilt dat de hele pagina een achtergrondafbeelding heeft, moet u de achtergrondafbeelding op het <body>element specificeren:
Voorbeeld
Voeg een achtergrondafbeelding toe voor de hele pagina:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
achtergrond herhaling
Als de achtergrondafbeelding kleiner is dan het element, herhaalt de afbeelding zichzelf, horizontaal en verticaal, totdat het het einde van het element bereikt:
Voorbeeld
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Om te voorkomen dat de achtergrondafbeelding zichzelf herhaalt, stelt u de background-repeateigenschap in op no-repeat.
Voorbeeld
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Achtergrondomslag
Als u wilt dat de achtergrondafbeelding het hele element bedekt, kunt u de background-sizeeigenschap instellen op
cover.
Om er zeker van te zijn dat het hele element altijd bedekt is, stelt u de
background-attachmenteigenschap in opfixed:
Op deze manier bedekt de achtergrondafbeelding het hele element, zonder uitrekken (de afbeelding behoudt zijn oorspronkelijke verhoudingen):
Voorbeeld
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Achtergrond uitrekken
Als u wilt dat de achtergrondafbeelding wordt uitgerekt om in het hele element te passen, kunt u de background-sizeeigenschap instellen op
100% 100%:
Probeer het formaat van het browservenster te wijzigen en u zult zien dat de afbeelding zal uitrekken, maar altijd het hele element zal bedekken.
Voorbeeld
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Meer informatie over CSS
Uit de bovenstaande voorbeelden heb je geleerd dat achtergrondafbeeldingen kunnen worden opgemaakt met behulp van de CSS-achtergrondeigenschappen.
Voor meer informatie over CSS-achtergrondeigenschappen, bestudeer onze CSS-achtergrondzelfstudie .