CSS meerdere achtergronden

In dit hoofdstuk leer je hoe je meerdere achtergrondafbeeldingen aan een element kunt toevoegen.

Je zult ook de volgende eigenschappen leren:

  • background-size
  • background-origin
  • background-clip

CSS meerdere achtergronden

CSS staat je toe om via background-image De eigenschap voegt meerdere achtergrondafbeeldingen toe aan een element.

Verschillende achtergrondafbeeldingen worden gescheiden door komma's en worden op elkaar gestapeld, waarbij de eerste afbeelding het dichtst bij de kijker ligt.

Het volgende voorbeeld heeft twee achtergrondafbeeldingen, de eerste afbeelding is een bloem (uitgelijnd met de onderkant en de rechterkant), de tweede afbeelding is een papierachtergrond (uitgelijnd met de linkerkant en de bovenkant):

voorbeeld

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Probeer het zelf

Meerdere achtergrondafbeeldingen kunnen worden gebruikt met een aparte achtergrond-eigenschap (zoals hierboven vermeld) of background Korte schrijfwijze om te specificeren.

De volgende voorbeeld gebruikt: background Korte schrijfwijze (resultaat is hetzelfde als in het vorige voorbeeld):

voorbeeld

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Probeer het zelf

CSS achtergrondgrootte

CSS background-size De eigenschap staat u toe om de grootte van de achtergrondafbeelding in te stellen.

De grootte van de achtergrondafbeelding kan worden gespecificeerd met behulp van lengte, percentage of met behulp van een van de volgende twee sleutelwoorden:contain of cover.

Het volgende voorbeeld past de grootte van de achtergrondafbeelding aan tot veel kleiner dan het oorspronkelijke beeld (in pixels):

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.

Dit is de code:

voorbeeld

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Probeer het zelf

background-size Andere twee mogelijke waarden zijn contain en cover.

contain Schalen de achtergrondafbeelding op tot de grootste maat mogelijk (maar moet toch passen binnen de inhoudsruimte). Afhankelijk van de verhouding tussen de achtergrondafbeelding en het achtergrondpositieruimte, kunnen er enkele achtergrondgebieden zijn die niet door de achtergrondafbeelding worden bedekt.

cover Kleuren de achtergrondafbeelding op een manier dat de inhoudsruimte volledig wordt bedekt door de achtergrondafbeelding (zijn breedte en hoogte zijn gelijk aan of groter dan de inhoudsruimte). Hierdoor kunnen sommige delen van de achtergrondafbeelding mogelijk in het achtergrondpositieruimte niet zichtbaar zijn.

Hier volgt een voorbeeld van: contain en cover Gebruik:

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;
}

Probeer het zelf

Definieer de grootte van meerdere achtergrondafbeeldingen

Bij het verwerken van meerdere achtergronden:background-size De eigenschap kan ook meerdere waarden voor de achtergrondgrootte aanvaarden (gescheiden door een komma opgelijst).

De volgende voorbeeld specificeert drie achtergrondafbeeldingen, elk met een verschillende waarde van background-size:

voorbeeld

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Probeer het zelf

Volledige afbeeldingsachtergrond

Nu willen we dat de achtergrondafbeelding op de website altijd het hele browservenster bedekt.

Specifieke vereisten zijn als volgt:

  • Vul de hele pagina met de afbeelding (zonder witruimte)
  • Schaal de afbeelding naar behoefte
  • Plaats de afbeelding centrally op de pagina
  • Geen scrollbar weergeven

Hier volgt een voorbeeld van hoe dit te realiseren: gebruik het <html>-element (het <html>-element is altijd ten minste de hoogte van het browservenster). Plaats vervolgens een vast en centreren achtergrond op dit element. Als laatste pas de grootte aan met de background-size-eigenschap:

voorbeeld

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Probeer het zelf

Hero Image

U kunt ook verschillende achtergrond-eigenschappen gebruiken op een <div> om een Hero Image (een grote afbeelding met tekst) te maken en deze op de gewenste positie te plaatsen.

voorbeeld

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Probeer het zelf

CSS background-origin eigenschap

CSS background-origin De eigenschap specificeert de positie van de achtergrondafbeelding.

Deze eigenschap accepteert drie verschillende waarden:

  • border-box - de achtergrondafbeelding begint aan de linkerkant van de rand
  • padding-box - de achtergrondafbeelding begint aan de linkerkant van de inkeping (standaard)
  • content-box - de achtergrondafbeelding begint aan de linkerkant van de inhoud

Hier volgt een voorbeeld van: background-origin eigenschappen:

voorbeeld

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Probeer het zelf

CSS background-clip eigenschap

CSS background-clip De eigenschap specificeert het tekengebied van de achtergrond.

Deze eigenschap accepteert drie verschillende waarden:

  • border-box - teken de achtergrond tot aan de buitenrand van de rand (standaard)
  • padding-box - teken de achtergrond tot aan de buitenrand van de inkeping
  • content-box - teken de achtergrond in het inhoudsgebied

Hier volgt een voorbeeld van: background-clip eigenschappen:

voorbeeld

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Probeer het zelf

CSS geavanceerde achtergrond-eigenschappen

Eigenschap Beschrijving
background Een korte eigenschap om alle achtergrond-eigenschappen in één verklaring in te stellen.
background-clip Definieer het tekeningsgebied van de achtergrond.
background-image Specificeer een of meerdere achtergrondafbeeldingen voor een element.
background-origin Definieer de positie van de achtergrondafbeelding.
background-size Definieer de grootte van de achtergrondafbeelding.