CSS meerdere achtergronden
In dit hoofdstuk leert u hoe u meerdere achtergrondafbeeldingen aan één element kunt toevoegen.
Je leert ook over de volgende eigenschappen:
background-sizebackground-originbackground-clip
CSS meerdere achtergronden
Met CSS kunt u via de
background-imageeigenschap meerdere achtergrondafbeeldingen voor een element toevoegen.
De verschillende achtergrondafbeeldingen worden gescheiden door komma's en de afbeeldingen worden op elkaar gestapeld, waarbij de eerste afbeelding zich het dichtst bij de kijker bevindt.
Het volgende voorbeeld heeft twee achtergrondafbeeldingen, de eerste afbeelding is een bloem (uitgelijnd met de onderkant en rechts) en de tweede afbeelding is een papieren achtergrond (uitgelijnd met de linkerbovenhoek):
Voorbeeld
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Meerdere achtergrondafbeeldingen kunnen worden gespecificeerd met behulp van de individuele achtergrondeigenschappen (zoals hierboven) of de backgroundsteno-eigenschap.
In het volgende voorbeeld wordt de backgroundeigenschap steno gebruikt (hetzelfde resultaat als het bovenstaande voorbeeld):
Voorbeeld
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
CSS-achtergrondgrootte
Met de CSS- background-sizeeigenschap kunt u de grootte van achtergrondafbeeldingen specificeren.
De maat kan worden opgegeven in lengtes, percentages, of door een van de twee trefwoorden te gebruiken: bevatten of bedekken.
In het volgende voorbeeld wordt het formaat van een achtergrondafbeelding veel kleiner gemaakt dan de originele afbeelding (met pixels):
Dank hem voor de pijn
De pijn zelf is de liefde
Daarom is het voor de minste die komt, wie onze normale praktijk verdraagt om te profiteren van de gevolgen
Hier is de code:
Voorbeeld
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
De twee andere mogelijke waarden voor background-sizezijn contain
en cover.
Het containtrefwoord schaalt de achtergrondafbeelding om zo groot mogelijk te zijn (maar zowel de breedte als de hoogte moeten binnen het inhoudsgebied passen). Als zodanig kunnen er, afhankelijk van de verhoudingen van de achtergrondafbeelding en het achtergrondpositioneringsgebied, bepaalde delen van de achtergrond zijn die niet door de achtergrondafbeelding worden bedekt.
Met het covertrefwoord 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). Als zodanig zijn sommige delen van de achtergrondafbeelding mogelijk niet zichtbaar in het achtergrondpositioneringsgebied.
Het volgende voorbeeld illustreert het gebruik van containen cover:
Voorbeeld
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Definieer formaten van meerdere achtergrondafbeeldingen
De background-sizeeigenschap accepteert ook meerdere waarden voor achtergrondgrootte (met behulp van een door komma's gescheiden lijst), wanneer u met meerdere achtergronden werkt.
In het volgende voorbeeld zijn drie achtergrondafbeeldingen gespecificeerd, met een verschillende waarde voor de achtergrondgrootte voor elke afbeelding:
Voorbeeld
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Achtergrondafbeelding op volledige grootte
Nu willen we een achtergrondafbeelding op een website die te allen tijde het hele browservenster beslaat.
De vereisten zijn als volgt:
- Vul de hele pagina met de afbeelding (geen witruimte)
- Schaal afbeelding naar behoefte
- Afbeelding centreren op pagina
- Geen schuifbalken veroorzaken
Het volgende voorbeeld laat zien hoe u dit moet doen; Gebruik het <html> element (het <html> element is altijd minimaal de hoogte van het browservenster). Stel er vervolgens een vaste en gecentreerde achtergrond op. Pas vervolgens de grootte aan met de eigenschap background-size:
Voorbeeld
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Heldenafbeelding
U kunt ook verschillende achtergrondeigenschappen op een <div> gebruiken om een heldafbeelding (een grote afbeelding met tekst) te maken en deze te plaatsen waar u maar wilt.
Voorbeeld
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
CSS achtergrond-oorsprong eigenschap
De CSS background-origin-eigenschap geeft aan waar de achtergrondafbeelding wordt geplaatst.
De eigenschap heeft drie verschillende waarden:
- border-box - de achtergrondafbeelding begint in de linkerbovenhoek van de rand
- padding-box - (standaard) de achtergrondafbeelding begint in de linkerbovenhoek van de opvulrand
- content-box - de achtergrondafbeelding begint in de linkerbovenhoek van de inhoud
Het volgende voorbeeld illustreert de background-origineigenschap:
Voorbeeld
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSS background-clip Eigenschap
De CSS- background-clipeigenschap specificeert het schildergebied van de achtergrond.
De eigenschap heeft drie verschillende waarden:
- border-box - (standaard) de achtergrond is geschilderd tot aan de buitenrand van de rand
- padding-box - de achtergrond is geschilderd naar de buitenrand van de padding
- content-box - de achtergrond is geschilderd in de contentbox
Het volgende voorbeeld illustreert de background-clipeigenschap:
Voorbeeld
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
CSS geavanceerde achtergrondeigenschappen
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |