web2 logo

Background

Waarden:
[ background-color ][ background-image ][ background-repeat ][ background-attachment ][ background-position ] | inherit

Default is niet inherited. Percentages kunnen gebruikt worden voor background-position.

Het instellen van de background eigenschappen op deze manier zorgt ervoor dat alle background eigenschappen die niet expliciet genoemd worden op de regel (die dus weggelaten worden) de standaardwaarde voor deze eigenschap krijgen. Ook kunnen deze standaardwaarden meer specifieke waarden die met eerdere background eigenschappen zijn ingesteld vervangen.
Als voorbeeld:
h1 {
   background-repeat: repeat-x;
}
h1, h2 {
   background: yellow url(headback.gif);
}
De repeat-waarde voor zowel h1 als h2 elementen zullen de standaardwaarde voor repeat krijgen en daarmee eerder ingestelde waarden voor repeat vervangen.
Voorbeelden:
body {
   background: white url(bg41.gif) fixed center repeat-x;
}
p {
   background: url(plaatjes/steen.png) #555;
}
pre {background: yellow;}
Meerdere achtergrondafbeeldingen kunnen tegelijk gebruikt worden door deze te scheiden met komma's.
Voorbeeld:
body {
   background:
      url(../img/plaatje1.png) repeat-x fixed -130% 0,
      url(../img/plaatje2.png) repeat-x fixed 40% 0,
      url(../img/plaatje3.png) repeat-x fixed -80% 0,
      url(../img/plaatje4.png) repeat-x fixed 100% 0;
}

Background-attachment

Waarden:
scroll | fixed | inherit

Standaard waarde: scroll
Toepasbaarheid: Alle elementen.
Inherited: Nee.

Omschrijving:
Deze eigenschap bepaalt of de achtergrondafbeelding wel of niet meescrollt met de pagina. Hiermee kunnen achtergronden worden gemaakt die "op hun plaats blijven".
 
Voorbeelden:
body {
   background-attachment: scroll;
}
div.fixbg {
   background-attachment: fixed;
}

Background-color

Waarden:
color | transparent | inherit

Standaard waarde: transparent
Toepasbaarheid: Alle elementen.
Inherited: Nee.

Omschrijving:
Deze eigenschap stelt de achtergrondkleur in van een element. Deze kleur vult de inhoud, padding en border gebieden van het element, tot en met de buitenste grens van de border van het element. Bij borders met doorzichtige gedeelten, zoals "dashed" borders, zal de achtergrondkleur in de doorzichtige gebieden te zien zijn.
Voorbeelden:
h4 {
   background-color: white;
}
p {
   background-color: rgb(50%,50%,50%);
}
pre {
   background-color: #FF9;
}

Background-image

Waarden:
uri | none | inherit

Standaard waarde: none
Toepasbaarheid: Alle elementen.
Inherited: Nee.
Berekende waarde: Absolute URI.

Omschrijving:
Plaats een afbeelding als achtergrond van een element. De waarde van background-repeat bepaalt of de afbeelding eindeloos herhaald wordt (het betegelen van de achtergrond), alleen horizontaal of verticaal herhaald wordt, of niet herhaald wordt. Het eerste achtergrondplaatje wordt geplaatst aan de hand van background-position.

Voorbeelden:
body {
   background-image: url(bg41.gif);
}
h2 {
   background-image: url(plaatjes/stipjes.png);
}

Background-position

Waarden:
[[ percentage | length | left | center | right ] [ percentage | length | top | center | bottom ]?] | [[ left | center | right ] || [ top | center | bottom ]] | inherit

Standaard waarde: 0%0%
Toepasbaarheid: Alle elementen.
Inherited: Nee.
Percentages: Verwijst naar het corresponderende punt op zowel het element als de originele afbeelding.
Berekende waarde: De absolute lengte offsets indien length is gespecifeerd, anders percentages.

Omschrijving:
Deze eigenschap stelt de startpositie in van het achtergrondplaatje. Dit is het punt vanaf waar elke herhaling of betegeling plaatsvind. Percentages bepalen niet alleen een punt binnen het element, maar ook hetzelfde punt in de afbeelding zelf. Een achtergrondafbeelding kan daarom gecentreerd worden door als background-position te nemen 50% 50%.
Indien percentages of lengtewaarden worden gebruikt is de eerste altijd de horizontale positie en de tweede de verticale. Als er slechts één waarde wordt gegeven dan stelt dit de horizontale positie in en de missende verticale waarde wordt dan automatisch ingesteld op center of 50%. Negatieve waarden zijn toegestaan en deze kunnen de afbeelding (gedeeltelijk) buiten de grenzen van het element plaatsen zonder het (in het geheel) weer te geven.
Voorbeelden:
body {
   background-position: top center;
}
div#navbar {
   background-position:right;
}
pre {
   background-position: 10px 50%;
}

Background-repeat

Waarden:
repeat | repeat-x | repeat-y | no-repeat | inherit

Standaard waarde: no-repeat
Toepasbaarheid: Alle elementen.
Inherited: Nee.

Omschrijving:
Deze eigenschap bepaald het betegel- of herhalingspatroon voor de achtergrondafbeelding.
De as (axis) gerelateerde herhalingen zorgen voor betegelingen in beide richtingen langs de gekozen as (axis). De herhalingen starten vanaf de startafbeelding die bepaald is door background-image en is geplaatst volgens background-position.
Voorbeelden:
body {
   background-repeat: no-repeat;
}
h2 {
   background-repeat: repeat-x;
}
ul {
   background-repeat: repeat-y;
}

Toegevoegd door: Kees de Keijzer
Twitter: @kdkq

~ css ~

~ Onderwerpen ~

Dit is een website zonder pop-ups

~ Links ~

Design & Development by Cyberwebdesign.nl for web2.nl © 2020.