Articles
Introductie tot CSS
Achtergrondgerelateerde CSS-eigenschappen

Achtergrondgerelateerde CSS-eigenschappen

Dit artikel legt achtergrondgerelateerde CSS-eigenschappen uit.

Je kunt leren hoe je eigenschappen zoals achtergrondinstelling, positie en herhaling beschrijft.

YouTube Video

HTML maken voor voorbeeldweergave

css-background.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

Achtergrond en Decoratie

Eigenschap background-color 

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

De eigenschap background-color wordt in CSS gebruikt om de achtergrondkleur van een element in te stellen. Je kunt de kleur specificeren die achter tekst en andere elementen wordt weergegeven, en kleuren kunnen in verschillende formaten worden gedefinieerd. De methode om kleuren te specificeren is vergelijkbaar met de color-eigenschap, maar je kunt ook een volledig transparante achtergrond instellen met behulp van transparent.

Uitleg:

  • red-example klasse specificeert de achtergrondkleur als rood met behulp van een trefwoord.
  • hex-example klasse specificeert de achtergrondkleur met behulp van een hexadecimale code.
  • rgb-example klasse specificeert de achtergrondkleur met behulp van het RGB-formaat.
  • rgba-example klasse specificeert de achtergrondkleur met behulp van het RGBA-formaat, inclusief transparantie.
  • hsl-example klasse specificeert de achtergrondkleur met behulp van het HSL-formaat.
  • hsla-example klasse specificeert de achtergrondkleur met behulp van het HSLA-formaat, inclusief transparantie.
  • transparent-example klasse stelt de achtergrond in als transparant.

Eigenschap background-image 

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

De eigenschap background-image wordt gebruikt om een afbeelding als achtergrond van een element in te stellen. De gespecificeerde afbeelding wordt weergegeven als de achtergrond van het element, en de grootte, positie en herhalingsmethode kunnen worden aangepast met andere gerelateerde eigenschappen. We zullen later ook gerelateerde eigenschappen uitleggen, zoals background-size, background-position en background-repeat.

Uitleg:

  • background-image-example klasse gebruikt de background-image eigenschap om image.jpg als achtergrond in te stellen. background-size: cover zorgt ervoor dat de afbeelding het hele element bedekt, en background-position: center centreert de afbeelding. Herhaling is uitgeschakeld met background-repeat: no-repeat.

  • De background-image-gradient klasse gebruikt linear-gradient() om een achtergrondverloop van rood naar blauw in te stellen. Het verloop wordt van links naar rechts weergegeven.

Typen waarden die kunnen worden gespecificeerd

De eigenschap background-image kan de volgende waarden hebben.

  • url(): Geeft de URL van de achtergrondafbeelding op. Plaats het afbeeldingsbestand binnen url(). (ex.url('image.jpg'))
  • none: Geeft aan geen achtergrondafbeelding in te stellen. Dit is de standaardwaarde.
  • Verlopen: Het is ook mogelijk om verlopen als achtergrondafbeeldingen in te stellen met behulp van CSS-verloopfuncties. (ex.linear-gradient(), radial-gradient())

Belangrijke punten van de background-image-eigenschap

  • Afbeeldingsgrootte en positionering: De grootte en positionering van achtergrondafbeeldingen kunnen nauwkeurig worden bestuurd met andere eigenschappen, wat aanpassingen in het ontwerp mogelijk maakt. Door bijvoorbeeld background-size: cover op te geven, wordt de afbeelding uitgerekt om het hele gebied te bedekken, waardoor bijsnijding wordt voorkomen.

  • Gebruik van gradiënten: In plaats van een afbeelding kun je een gradiënt als achtergrond gebruiken, wat een dynamisch element aan het ontwerp toevoegt.

Eigenschap background-position 

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

De background-position-eigenschap wordt gebruikt om de positie van een achtergrondafbeelding binnen een element te specificeren. Door te bepalen waar de achtergrondafbeelding binnen het element verschijnt, kun je lay-outs maken die bij je ontwerp passen. De standaard is 0% 0%, waarmee de afbeelding in de linkerbovenhoek wordt geplaatst.

Uitleg:

  • top-left-example klasse specificeert de positie van de afbeelding als top left, waardoor de afbeelding in de linkerbovenhoek wordt geplaatst.
  • center-example klasse positioneert de afbeelding in het midden met behulp van het center attribuut.
  • bottom-right-example klasse specificeert de positie van de afbeelding als bottom right, waardoor de afbeelding in de rechteronderhoek wordt geplaatst.

Typen waarden die kunnen worden gespecificeerd

De eigenschap background-position kan de volgende soorten waarden hebben.

  • Trefwoorden: Je kunt left, right, top, bottom, center opgeven.

    • Het specificeren van center plaatst de achtergrondafbeelding in het midden van het element.
    • Het specificeren van right plaatst de achtergrondafbeelding aan de rechterkant.
    • Het specificeren van top left plaatst de achtergrondafbeelding in de linkerbovenhoek.
    • Het opgeven van bottom right plaatst de achtergrondafbeelding in de rechterbenedenhoek.

  • Lengte of percentage: Je kunt waarden opgeven zoals 10px 20px, 50% 50%.

    • Het opgeven van 10px 20px plaatst de achtergrondafbeelding 10px vanaf de linkerzijde en 20px vanaf de bovenkant.
    • Het opgeven van 50% 50% centreert de achtergrondafbeelding zowel horizontaal als verticaal.

  • calc()-functie: Maakt preciezer positioneren mogelijk met behulp van CSS-berekeningen.

De eigenschap background-size 

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

De eigenschap background-size wordt gebruikt om de grootte van een achtergrondafbeelding voor een element te specificeren. Met deze eigenschap kun je aanpassen hoe de achtergrondafbeelding wordt weergegeven, of deze nu het volledige element vult of zijn oorspronkelijke grootte behoudt, om in het ontwerp te passen. De standaardwaarde is auto, waarmee de oorspronkelijke grootte van de achtergrondafbeelding wordt behouden.

Uitleg:

  • cover-example klasse specificeert cover. De afbeelding wordt vergroot om het hele element te bedekken, maar delen kunnen worden bijgesneden.
  • contain-example klasse specificeert contain. De afbeelding wordt aangepast om binnen het element te passen, maar er kan enige witte ruimte verschijnen.
  • fixed-size-example klasse specificeert een vaste grootte voor de achtergrondafbeelding, waarbij de breedte en hoogte elk op 100px worden ingesteld.

Typen waarden die kunnen worden gespecificeerd

De background-size-eigenschap kan de volgende soorten waarden toegewezen krijgen.

  • Sleutelwoorden

    • auto: Behoudt de standaardgrootte van de afbeelding (breedte en hoogte worden automatisch bepaald).
    • cover: Past de grootte van de achtergrondafbeelding aan om het hele element te bedekken. Het vult het hele element, maar delen van de afbeelding kunnen worden bijgesneden.
    • contain: Past de afbeelding aan om binnen het element te passen, maar bedekt niet het gehele element. De beeldverhouding van de afbeelding blijft behouden.

  • Numerieke waarden (px, %, em, etc.)

    • Breedte en hoogte: Specificeer expliciet de breedte en hoogte. Als slechts één waarde wordt opgegeven, geldt deze voor de breedte en wordt de hoogte automatisch aangepast.
    • Percentage: Specificeer de grootte van de achtergrondafbeelding als een percentage van de grootte van het element. Bijvoorbeeld, 50% 50% stelt de afbeelding in op de helft van de breedte en hoogte van het element.

Eigenschap background-repeat 

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

De eigenschap background-repeat wordt gebruikt om te bepalen hoe de achtergrondafbeelding van een element wordt herhaald. Standaard wordt de achtergrondafbeelding horizontaal en verticaal binnen het element herhaald, maar je kunt het herhaalgedrag aanpassen met deze eigenschap.

Uitleg:

  • repeat-example klasse geeft de afbeelding weer, zowel verticaal als horizontaal herhaald.
  • repeat-x-example klasse herhaalt de afbeelding alleen horizontaal.
  • no-repeat-example klasse geeft de afbeelding slechts één keer weer zonder herhaling.
  • space-example klasse verdeelt de achtergrondafbeeldingen gelijkmatig met gelijke tussenruimte.
  • round-example klasse past de grootte van de achtergrondafbeelding automatisch aan om deze te herhalen en het hele element te vullen.

Opgegeven waarden

De background-repeat-eigenschap kan de volgende soorten waarden toegewezen krijgen.

  • repeat: De achtergrondafbeelding wordt herhaald langs zowel de X-as (horizontaal) als de Y-as (verticaal). Dit is de standaardwaarde.
  • repeat-x: De achtergrondafbeelding wordt alleen herhaald langs de X-as (horizontaal).
  • repeat-y: De achtergrondafbeelding wordt alleen herhaald langs de Y-as (verticaal).
  • no-repeat: De achtergrondafbeelding wordt niet herhaald en slechts één keer weergegeven.
  • space: De achtergrondafbeelding wordt met regelmatige tussenruimtes herhaald, met gelijke afstanden ertussen.
  • round: De achtergrondafbeelding wordt herhaald, maar de grootte wordt aangepast om het gehele element te vullen. De afbeelding kan worden aangepast.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

CSS-eigenschappen gerelateerd aan het boxmodelCSS-eigenschappen met betrekking tot de decoratie van het boxmodel