background-image-eigenschap maakt het mogelijk om een afbeelding als achtergrond van een HTML-element toe te voegen. De basis-syntaxis is zeer eenvoudig:

background-image: url("image-url.jpg");

Als waarde voor de background-image-eigenschap gebruiken we url(), en binnen deze haakjes geven we de url van de afbeelding op.

background-repeat

Bepaalt of de afbeelding horizontaal, verticaal, beide of helemaal niet wordt herhaald.

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

background-position

background-position wordt gebruikt om de beginpositie van een achtergrondafbeelding binnen het achtergrondgebied van een element in te stellen. Met deze eigenschap kan worden opgegeven waar de achtergrondafbeelding moet worden geplaatst en hoe deze ten opzichte van het element gepositioneerd moet worden. De positie moet worden ingesteld op de x- en y-as

background-position: x y

background-size

background-size specificeert de grootte van de achtergrondafbeelding van een element. Hiermee kan de afbeelding worden geschaald om in het element te passen, of kan een specifieke grootte voor de achtergrondafbeelding worden ingesteld.

background-size: auto | cover | contain | value in px/em/rem;

• auto behoudt de oorspronkelijke grootte van de achtergrondafbeelding (standaard);
• cover schaalt de afbeelding zodat het element volledig wordt bedekt, met behoud van de beeldverhouding, waarbij delen van de afbeelding kunnen worden bijgesneden;
• contain schaalt de afbeelding zodat deze volledig binnen het element past, met behoud van de beeldverhouding, waardoor er mogelijk lege ruimtes ontstaan;
• value stelt aangepaste afmetingen voor de achtergrondafbeelding in, zoals 100px 50px of percentages zoals 50%.