Baggrunde

CSS background bruges (sjovt nok) til at definere baggrundseffekter på et element. Der findes følgende

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color

Background-color definerer baggrundsfarven for et element. F.eks. sættes sidens baggrundsfarve på body tagget:

body  { background-color:#b0c4de; }

Baggrundsfarven kan specificeres ved:

• navn - farvens navn som "red"
• RGB - en RGB værdi som "rgb(255,0,0)"
• Hex - en hex værdi som "#ff0000"

I dette eksempel har h1, p og div forskellige baggrundsfarver

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Background Image

Background-image bruges til at sætte et billede som baggrund for et element. Som standard vil billedet blive gentaget så det dækker hele elementet.

Man kan sætte et baggrundsbillede for en side sådan her:

body {background-image:url('paper.gif');}

Background Image - Repeat Horizontally or Vertically

Som default vil baggrundsbilleder blive gentaget både vandret og lodret, men ønsker man kun gentagelse i én retning kan det gøres sådan her:

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Background Image - Set position and no-repeat

Ønsker man at vise billedet kun én gang kan det gøres sådan her:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Og man kan også placere billedet på skærmen:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}