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;
}