Background properties og values

Indsæt et enkelt foto
CSS
body  {
	width: 100%;
	height: 100%;
	background-color: white; 	
	background: url( ../img_background/img_bg_stripes.jpg );
	background-repeat: no-repeat; 
	background-position: center; 		
	background-size: cover; 	
}
Indsæt to fotos
CSS - som demo uden kommentarer
body  {
	width: 100%;
	height: 100%;
	background-color: white; 	
	background: url( ../img_background/img_bg_silhouettes.png ), 
				url( ../img_background/img_bg_stripes.jpg );
	background-repeat: no-repeat; 
	background-position: center 300px, center; 		
	background-size: 500px auto, cover; 	
}
CSS - som demo med kommentarer
body  {
	width: 100%;
	height: 100%;
	background-color: white; 	
	background: url( ../img_background/img_bg_silhouettes.png ), /* Z-INDEX 1 */
				url( ../img_background/img_bg_stripes.jpg );	/* Z-INDEX 0 */
	background-repeat: no-repeat; /* img_bg_silhouettes + img_bg_stripes: GENTAG IKKE */	
	background-position: center 300px, center; /* img_bg_silhouettes: CENTER + TOP: 300PX / img_bg_stripes: CENTER */			
	background-size: 500px auto, cover; /* img_bg_silhouettes: BREDDE 500PX + HØJDE AUTO / img_bg_stripes: UDFYLD ELEMENTET */		
}

Om CSS-property background

Der findes flere forskellige varianter af properti'en 'background' - nogle er CSS2 og andre CSS3 med varierende browser-support.

Herunder findes beskrivelser af nogle af de mere komplekse, som tillader brug af mere end 1 enkelt value (værdi).

2 forskellige background-images indsat i body
DEMO

background

Indsæt et eller flere fotos som baggrund i body eller et HTML-element

Indsæt et enkelt foto

Fotoet har samme z-index som elementet det indsættes i

background: url( img_background/img_bg_stripes.jpg );
children
Indsæt to fotos

Det første foto har højere z-indeks end det næste og placeres øverst -
det sidste foto har samme z-index som elementet det indsættes i og placeres i bunden

background: url( img_background/img_bg_silhouettes.png ),
			url( img_background/img_bg_stripes.jpg );
children

Background-repeat

Bestem hvorvidt foto skal gentages eller ikke

default - repeat

Default – img gentages fra venstre mod højre horizontalt i hele elementet

background-repeat: repeat;
children
no-repeat

Ingen gentagelse – img vises uden gentagelser

background-repeat: no-repeat;
children
repeat-x

Horizontal gentagelse i bredden – img gentages fra venstre mod højre horizontalt i øverste række

background-repeat: repeat-x;
children
repeat-y

Vertikal gentagelse i højden – img gentages fra top mod bund vertikalt i yderste venstre række

background-repeat: repeat-y;
children

Background-position

Background-postion er en del af CSS3 - browsersupport til og med IE9. Se Caniuse.

Et foto kan placeres med værdierne pixel, procent og keywords. Keywords har 5 forskellige værdier:

Keywords
  • center
  • top
  • bottom
  • left
  • right
default - top left

Default - img placeres i øverste venstre hjørne

background-position: 0 0;
children
placering med en enkelt værdi

Kun horizontal placering fra venstre mod højre - vertikal placering er center ved enkelt værdi

background-position: center;
children 
background-position: 600px;
children
placering med to værdier

Den 1. værdi gælder horizontal placering fra venstre mod højre (kun keywords left og right kan bruges) -
den 2. værdi gælder vertikal placering fra top mod bund (kun keywords top og bottom kan bruges)

background-position: left 100px;
children 
background-position: 50px bottom;
children

Background-size

Background-postion er en del af CSS3 - browsersupport til og med IE9. Se Caniuse.

Størrelsen af et foto kan angives med værdierne pixel, procent og keywords. Keywords har 3 forskellige værdier – se uddybende beskrivelser af værdierne 'cover' og ' contain' i artiklen Skalering background-size cover og contain:

Keywords
  • auto (default – kan undlades)
  • cover
  • contain
default - original størrelse

Default - img vises i naturlig størrelse målt i pixels

background-size: auto;
children
størrelsen med en enkelt værdi

Værdien gælder kun bredden horizontalt -
aspect ratio (de originale dimensioner) bevares med 'auto' på højden vertikalt

background-size: 50px;
children
størrelsen med to værdier

Den 1. værdi gælder bredden horizontalt (ingen keywords bortset fra 'auto') -
den 2. værdi gælder højden vertikalt (ingen keywords bortset fra 'auto')

background-size: 100% 50px;
children