Achtergronden

(Backgrounds & borders)

Meer dan één achtergrond

Uit de demo:

p {
 background-image: 
  url(sunglasses.svg), 
  url(postit.png);
  
 background-size:4em auto, 100% 100%;
 background-position:
   bottom 0.5em  right 0.5em, 0 0;
 background-repeat: no-repeat, no-repeat; 
}   

Contain & cover

Uit de demo:

div:nth-child(1) {
  background-size: contain }
div:nth-child(2) {
  background-size: cover }

Waarden voor background-size:

• px, em, %, auto ('auto' behoudt de verhoudingen)
• contain (zo groot mogelijk met het hele plaatje zichtbaar)
• cover (hele achtergrond bedekt, maar het plaatje kan in de breedte of de hoogte worden afgesneden)

Background-origin, background-clip

Uit de demo :

div:nth-child(1) {
 border:10px dotted #5f749f;
 background-size:100px auto, 100% 100%;
 background-origin: border-box;
 background-position:85% 10px, top left;
}

Background-attachment

Uit de demo:

body{ background-attachment:fixed }   
   
div:nth-child(1){
	background-attachment:local, local }
div:nth-child(2){
	background-attachment:local, scroll }

local = het plaatje scrollt mee met de text van het element
scroll = het plaatje scrollt alleen met het venster
(januari 2013: Opera, ok, Webkit ok, Firefox nee)

Background-position

Uit de demo:

div:nth-child(1){
  background-position: right 30%   bottom 3px }

Achtergronden kunnen nu geplaatst worden ten opzichte van alle vier de hoeken

(januari 2013: Opera ok, Firefox ok, Webkit nee)

Background-repeat

Uit de demo:

div:nth-child(1){
  background-repeat:round } 
div:nth-child(2){
  background-repeat:space }

round = geheel aantal plaatjes, plaatjes zonodig geschaald
space = geheel aantal plaatjes, met zonodig wat ruimte ertussen

(januari 2013: Opera afrondfouten? Webkit nee, Firefox nee)

'Background' korte vorm

Korte vorm

div:nth-child(1){
  background:#c7c7c7 url(postit.png)
    top left/cover no-repeat;
}
   

Achtergronden met gradiënten

Uit de demo

div:nth-child(1){
	background-image:
    linear-gradient(top, tomato, gold);
}
div:nth-child(10){
	background-image:
    radial-gradient(red, yellow, green);
}

(Het laatste voorbeeld in de demo heeft een gradient korter dan de resolutie van het scherm. Op dit moment (jan. 2013) doet alleen Opera dat goed.)

Oefeningen

1. 

   Eenvoudig: maak een document met een achtergrond die de window vult met een 2x2 schaakbord-patroon. Gebruik geen plaatjes, alleen 'background' en gradiënten

2. 

   Moeilijk: idem, maar nu met een 8x8 schaakbordpatroon.

Hint: een zwart plaatje maak je zo:

linear-gradient(black, black)

(met zo nodig een „vendor-prefix”)

Einde

→ Terug naar agenda