background

Siden er opdateret 14. 12. 2011

Egenskaben background definerer flere forskellige værdier på en gang. En sædvanlig rækkefølge vil være [color], [image], [position], [attachment], [repeat]

color
background-color defineres med enten rgb- eller hexkode eller med et farvenavn (kun 16 valide muligheder) eller med værdien inherit - nedarvet fra overordnet element. Værdien transparent er godt nok valid, men den udløser en advarsel, så undlad så vidt muligt at bruge den værdi.
foo {
  background: #369 ...;
  }
Skal du lave transparent baggrund på noget tekst (sidens baggrundsfarve eller -billede ses bag teksten), koder du det på denne måde:
p{
  color: black;
  background: inherit; /* arver baggrundens farve */
  }
image
background-image defineres ved at anføre url til den ønskede grafik:
foo {
  background: #369 url(bgimg.gif) ...;
  }
position
background-position kan under kortform kun angives som top, bottom, center, left og right. To ikke-modstridende værdier kan angives. Angives center alene, gælder værdien både vandret og lodret.
foo {
  background: #369 url(bgimg.gif) top left ...;
  }
attachment
background-attachment kan antage to værdier, fixed og scroll. Da scroll (baggrundsbilledet scrolles op/ned med sidens indhold) er default, giver det kun mening at definere attachment, hvis man skal bruge værdien fixed.
foo {
  background: #369 url(bgimg.gif) center fixed;
  }
repeat
background-repeat kan gives 4 mulige værdier repeat, repeat-x, repeat-y og no-repeat.
repeat
baggrundsbilledet gentages vandret og lodret indtil elementet er udfyldt.
repeat-x
baggrundsbilledet gentages vandret indtil elementet er udfyldt.
repeat-y
baggrundsbilledet gentages lodret indtil elementet er udfyldt.
no-repeat
baggrundsbilledet gentages ikke.
foo {
  background: #369 url(bgimg.gif) top left repeat-x;
  }
Valid XHTML og CSS / Copyright © Hjemmesideskolen februar 2008
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - background
sidens top
Brugere lige nu: 1
Home Mail