HTMLcssJAVA.com

background:

De background property is verantwoordelijk voor de achtergrond van een element. Hiermee kunnen achtergrondkleuren, achtergrondafbeeldingen, herhaling, positie en scrollen gedefinieerd worden.

Voorbeelden:

• background: background-color: red;
• background: background-image: url(/images/bg_image.png);
• background: background-repeat: repeat-y;
• background: background-position: center;
• background: background-attachment: fixed;

Toepassing:

<DIV style="background: background-attachment: fixed;"> Voorbeeldtekst </DIV>

background-attachment:

De background-attachment property bepaalt of de achtergrondafbeelding, of de achtergrondkleur, samen met de pagina scrollt of niet.

Voorbeelden:

• background-attachment: fixed;
• background-attachment: scroll;
• background-attachment: local;

Toepassing:

<DIV style="background-attachment: local;"> Voorbeeldtekst </DIV>

background-blend-mode:

De CSS property background-blend-mode bepaalt hoe twee of meer achtergrondlagen beïnvloeden elkaar. Deze property kun je gebruiken om het kleur- of lichtniveau, contrast, of andere visuele effecten toe te passen, door twee of meer achtergrondlagen te mengen

Voorbeelden:

• background-blend-mode: normal;
• background-blend-mode: multiply;
• background-blend-mode: screen;
• background-blend-mode: overlay;
• background-blend-mode: darken;
• background-blend-mode: lighten;
• background-blend-mode: color-dodge;
• background-blend-mode: color-burn;
• background-blend-mode: hard-light;
• background-blend-mode: soft-light;
• background-blend-mode: difference;
• background-blend-mode: exclusion;
• background-blend-mode: hue;
• background-blend-mode: saturation;
• background-blend-mode: color;
• background-blend-mode: luminosity;

Toepassing:

<DIV style="background-blend-mode: luminosity;"> Voorbeeldtekst </DIV>

background-clip:

De background-clip property bepaalt hoe de achtergrond image (background) tot een element moet worden beperkt. Deze property verwijst naar de plaats waar de achtergrond image gesneden moet worden. De achtergrondimage kan worden beperkt tot het element zelf, het padding gebied, of het content gebied.

Voorbeelden:

• background-clip: border-box;
• background-clip: padding-box;
• background-clip: content-box;

Toepassing:

<DIV style="background-clip: content-box;"> Voorbeeldtekst </DIV>

background-color:

De background-color property definieert de achtergrondkleur van een element. Dit kan een kleur zijn, een afbeelding of een kleurovergang.

Voorbeelden:

• background-color: rgb(255,0,0);
• background-color: rgba(255,0,0,0.5);
• background-color: #FF0000;
• background-color: red;

Toepassing:

<DIV style="background-color: red;"> Voorbeeldtekst </DIV>

background-image:

De background-image property geeft de achtergrondafbeelding weer die getoond wordt in een element. De afbeelding kan een URL of een data URI zijn. Als de afbeelding niet gevonden wordt, wordt er geen achtergrondafbeelding getoond;

Voorbeelden:

• background-image: url(/images/example.jpg);
• background-image: linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 100%);
• background-image: none;

Toepassing:

<DIV style="background-image: none;"> Voorbeeldtekst </DIV>

background-origin:

De background-origin property geeft aan waar de achtergrond afbeelding begint. Het bepaalt de afbeelding positie binnen het element.

Voorbeelden:

• background-origin: border-box;
• background-origin: padding-box;
• background-origin: content-box;

Toepassing:

<DIV style="background-origin: content-box;"> Voorbeeldtekst </DIV>

background-position:

De css property 'background-position' wordt gebruikt om de positie van de achtergrondafbeelding te bepalen in de container waarin deze is geplaatst. Er kunnen absolute waarden worden gebruikt (in pixels, rems, percentages, etc.) of relatieve waarden (top, bottom, center, left, right).

Voorbeelden:

• background-position: top;
• background-position: left;
• background-position: bottom;
• background-position: right;
• background-position: 50% 50%;
• background-position: 10px 10px;
• background-position: 2rem 2rem;

Toepassing:

<DIV style="background-position: 2rem 2rem;"> Voorbeeldtekst </DIV>

background-repeat:

De background-repeat property geeft aan hoe een achtergrondafbeelding herhaald wordt. Deze property bepaalt of een afbeelding herhaald wordt als het element groter is dan de afbeelding, of de afbeelding alleen maar 1 keer wordt afgebeeld.

Voorbeelden:

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

Toepassing:

<DIV style="background-repeat: no-repeat;"> Voorbeeldtekst </DIV>

background-size:

De css property background-size bepaalt de afmetingen van de achtergrondafbeelding. Het kan worden ingesteld als een absolute maat zoals pixels, of als relatieve maat zoals percentages.

Voorbeelden:

• background-size: auto;
• background-size: cover;
• background-size: contain;
• background-size: 50% 100%;
• background-size: 200px 200px;

Toepassing:

<DIV style="background-size: 200px 200px;"> Voorbeeldtekst </DIV>