09. media (css)

afbeeldingen

Met het HTML-element img kunnen we een afbeelding op de website plaatsen. Net als alle andere HTML-elementen kunnen we met behulp van de width en height eigenschappen de grootte van de afbeelding bepalen.

Ook de positionering van de afbeelding verloopt zoals andere HTML-elementen. Hiervoor verwijzen we naar UI & UX (CSS).

achtergrondafbeeldingen

Met de background-image eigenschap kunnen we achter elk HTML-element een afbeelding plaatsen. Dit kan over de ganse website of slechts een deel van de pagina. Het pad naar de afbeelding wordt meegegeven via een URL.

body { 
    background-image: url("../images/pattern.gif");}

extra info: artikel A Deep Dive Into object-fit And background-size In CSS

herhaling

Standaard staat de afbeelding ingesteld om zichzelf te herhalen tot de volledige kader gevuld is. Uiteraard is dit niet altijd de gewenste uitkomst.

body {
    background-image: url("../images/tulp.gif");
    background-repeat: no-repeat;}

Andere opties zijn:

• repeat: afbeelding wordt verticaal en horizontaal herhaald;

• repeat-x: afbeelding wordt horizontaal herhaald;

• repeat-y: afbeelding wordt verticaal herhaald;

• no-repeat: afbeelding wordt niet herhaald.

positionering

Wanneer we een afbeelding niet herhalen, kunnen we met de background-position eigenschap bepalen waar in de kader de afbeelding geplaatst moet worden. Je kan zowel de horizontale als de verticale positie bepalen.

body {
    background-image: url("../images/tulp.gif");
    background-repeat: no-repeat;
    background-position: center top;}

korte schrijfwijze

Zoals wel vaker het geval is in CSS, kunnen we ook bij de achtergrondafbeeldingen de eigenschappen in een kortere weergave meegeven.

body {
    background: #ffffff url("../images/tulp.gif") no-repeat top right;}

sprites

Sprites zijn bestanden in het afbeeldingsformaat waar meerdere afbeeldingen in samen worden gezet. Door gebruik te maken van de eigenschappen van de achtergrondafbeelding kunnen we dan wisselen tussen de verschillende afbeeldingen in het bestand.

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav