CSS tutorial 3 – Farver og baggrund

I denne del af min CSS tutorial vil jeg vise dig hvordan du ændrer farver og baggrund med CSS.

Farver

Farver er en af de ting du oftest skal ændre med CSS på din hjemmeside. Det kan være en baggrundsfarve eller tekstfarve du skal ændre. Her bruger du CSS koden color, og angiver hexkoden for farven som værdi. Lad os lige se et eksempel:

h1 {
	color: #990000;
}

Dette betyder at for alle h1 tags, dvs. overskrift1 i dit html dokument, skal tekstfarven være #990000; Hexværdien for en farve kan du nemt få fat i. Du kan for eksempel med denne farvevælger nemt vælge den farve der passer dig og så den tilsvarende hexværdi.
I stedet for hexværdien kunne du også bare have skrevet populærnavnene for farverne. Det kunne være “red” for rød, “blue” for blå eller “green” for grøn.
Du kan også angive en RGB kode for farven. RGB koden angiver med tre tal hvor meget rødt, grønt og blå farven består af, og værdien skal være mellem 0 og 255. Det første tal angiver hvor meget rødt farven består af, så hvis du skal have en ren rød farve som RGB kode skriver du:

rgb(255,0,0)

RGB koderne kan du tilsvarende også finde på denne hjemmeside.

Baggrundsfarve

Hvor color angiver en tekstfarve, kan du også angive en baggrundsfarve. Det kan være en baggrundsfarve til en overskrift ved at koble det til h1 tagget – men det kan også være en baggrundsfarve for hele siden ved at koble det på body tagget:

body {
	background-color: #FFCC66;
}

Baggrundsbillede

Nu hvor vi er ved baggrunden, vil jeg også lige vise CSS koden til at kunne indsætte et baggrundsbillede i stedet for.

body {
	background-image: url("image.png");
}

Her indsætter vi altså billedet image.png som baggrundsbillede på hjemmesiden. Som andre steder hvor du skal skrive en url adresse, kan du både angive stien til billedet absolut ved at bruge hele url adressen eller relativt som her, hvor billedet så skal ligge i samme mappe som html filen.
Udover at angive siten til baggrunden, kan du også vælge om billedet skal gentages i baggrunden. Her bruger du koden background-repeat.

body {
background-image: url("image.png");
background-repeat: repeat;
 }

Værdien for background-repeat kan være none hvis den ikke skal gentages, repeat hvis den skal gentages, repeat-x hvis billedet skal gentages horisontalt og repeat-y hvis billedet skal gentages vertikalt.
Med background-attachment kan du angive om billedet skal være låst, så billedet ikke flytter sig når du scroller, eller ulåst så billedet flytter sig med scroll. Koden kan have værdien scroll for at billedet er ulåst og scroller med eller fixed for at billedet er låst.

body {
background-image: url("image.png");
background-repeat: repeat;
background-attachment: scroll;
 }

Med background-position kan du selv vælge hvor på skærmbilledet baggrunden skal starte. I nedenstående eksempel er værdien “top right” hvilket betyder at billedet vil blive placeret øverst til højre.

body {
background-image: url("image.png");
background-repeat: repeat;
background-attachment: scroll;
background-position: top right;
}

Værdien kunne også være “2cm 2cm”, hvilket betyder at billedet så ville begynde 2 cm nede og 2 cm fra venstre i øverste venstre hjørne på billedet.
Nu kunne du jo godt skrive alle disse linier for baggrunden, men med koden background kan du også opsummere alle de relevante koder for baggrunden:

background: #FFCC66 url("image.png") repeat scroll top right;

Hvis du undlader en af værdierne, får den bare standardværdien for feltet.
Nu ved du det meste der er værd at vide om farver og baggrund i CSS. I næste afsnit kigge vi nærmere på skrifttyper og skriftstørrelser.