Definition af baggrund

Siden er opdateret 4.2.2008

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