Lektion 3: Farver og baggrunde
I denne lektion vil vi kigge nærmere på muligheder for at benytte farver, baggrundsfarver og baggrundsbilleder. Følgende egenskaber vil blive gennemgået:
- Farver [color]
- Baggrundsfarver [background-color]
- Baggrundsbilleder [background-image]
- Gentag baggrundsbillede [background-repeat]
- Lås baggrundsbillede [background-attachment]
- Placér baggrundsbillede [background-position]
- Sammenskrivning [background]
Som det ses er mulighederne med farver og baggrunde langt mere avancerede og præcise med CSS end med HTML. Denne lektion sætter dig i stand til at udnytte disse muligheder optimalt.
Farver [color]
Den allerførste egenskab vi skal kigge på er color. Som du sikkert kan regne ud bruges color til at definere farver.
Lad os sige at vi gerne vil have alle overskrifter i et dokument til at være mørkerøde. Overskrifterne er markeret med elementet <h1>. Derfor knytter vi egenskaben til <h1>:
h1 {
color: #990000;
}
Ganske simpelt ikke? Farverne kan angives med hexadecimale værdier som i eksemplet (#990000) eller man kan vælge at benytte navnene på farverne eller rgb-værdier.
Baggrundsfarver [background-color]
Som vi kort berørte i den forrige lektion, benyttes egenskaben background-color til at definere baggrundsfarver.
Mens baggrundsfarven for hele dokumentet defineres på <body>, kan man også sætte baggrundsfarver på f.eks. overskrifter og tekst. Lad os prøve at sætte forskellige baggrundsfarver på <body> og <h1>:
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
OBS: Læg mærke til hvordan vi tilføjede endnu en egenskab til <h1> ved blot at lade de to egenskaber være adskilt af et semikolon.
Baggrundsbilleder [background-image]
På samme måde som det er muligt at benytte baggrundsbilleder i HTML, kan dette gøres i CSS med background-image.
Som et eksempel på et baggrundsbillede bruger vi en flot sommerfugl (se nedenfor). Du kan vælge at downloade billedet, så du kan benytte det på din egen maskine (højreklik på billedet - og vælg "gem billede som"), eller du kan bruge dit eget billede.
Billedet af sommerfuglen indsættes som baggrundsbillede på <body> ved at angive stien på billedet som værdi:
body {
background-color: #FFCC66;
background-image: url("sommerfugl.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
OBS: Bemærk hvordan vi skrev stien til billedet på formen url("sommerfugl.gif"). Man kan på samme måde referere til billeder i andre foldere med url("../billeder/sommerfugl.gif"), eller andre stedet på Internettet ved f.eks. at skrive url("http://www.html.dk/sommerfugl.gif").
Gentag baggrundsbillede [background-repeat]
Lagde du mærke til at sommerfuglen blev gentaget igen og igen over hele dokumentet? Som standard gentages et baggrundsbillede horisontalt og vertikalt så det fylder hele skærmen.
Hvis vi ønsker at ændre på dette, benytter vi egenskaben background-repeat.
background-repeat kan antage flere forskellige værdier:
| Værdi | Beskrivelse | |
|---|---|---|
| background-repeat: repeat-x | Billedet gentages horisontalt | |
| background-repeat: repeat-y | Billedet gentages vertikalt | |
| background-repeat: repeat | Billedet gentages både horisontalt og vertikalt | |
| background-repeat: no-repeat | Billedet gentages ikke |
Det vil sige, at hvis vi ikke ønsker vores baggrundsbillede gentaget, tilføjes følgende til vores CSS:
body {
background-color: #FFCC66;
background-image: url("sommerfugl.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Lås baggrundsbillede [background-attachment]
Egenskaben background-attachment bestemmer hvorvidt et baggrundsbillede skal være låst som baggrund.
Et låst baggrundsbillede flytter sig ikke, hvis siden scrolles op eller ned. Mens et baggrundsbillede, som ikke er låst, vil følge med resten af siden, når der scrolles.
background-attachment kan således antage to værdier:
| Værdi | Beskrivelse | |
|---|---|---|
| background-attachment: scroll | Billedet scroller med siden - ulåst | |
| background-attachment: fixed | Billedet er låst |
For at låse baggrundsbilledet i eksemplet tilføjes derfor følgende linie:
body {
background-color: #FFCC66;
background-image: url("sommerfugl.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Placér baggrundsbillede [background-position]
Et baggrundsbillede er som standard placeret i øverste venstre hjørne af dokumentet. Med egenskaben background-position kan man frit placere baggrundsbilledet overalt på skærmen.
Der findes flere forskellige måder at angive værdier til background-position, fælles er dog at værdien angives som et sæt koordinater. F.eks. vil værdien 100px 200px placere baggrundsbilledet 100px fra toppen, og 200px fra venstre kant af vinduet.
Koordinaterne kan angives med procenter af skærmvidden, faste enheder (pixels, centimeter, etc.), eller man kan benytte begreberne top, bottom, center, left og right. Følgende figur viser systemet:
Lad os lige kigge på nogle eksempler:
| Værdi | Beskrivelse | |
|---|---|---|
| background-position: 2cm 2cm | Billedet positioneres 2 centimeter fra venstre og 2 cm nede på siden. | |
| background-position: 25% 50% | Billedet positioneres centreret og en fjerdedel nede på siden. | |
| background-position: top right | Billedet positioneres yderst til højre på siden. |
I vores tilfælde kunne vi således vælge at placere baggrundsbilledet i nederste højre hjørne:
body {
background-color: #FFCC66;
background-image: url("sommerfugl.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Sammenskrivning [background]
Egenskaben background er en sammenskrivning af alle ovenstående egenskaber.
Det vil sige at man med background kan vælge at sammenskrive alle de øvrige egenskaber ned i en egenskab - og dermed kode et mere elegant og overskueligt stylesheet.
Hvis vi ser på vores kode:
background-color: #FFCC66;
background-image: url("sommerfugl.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Kan disse 5 linier med samme resultat sammenskrives til:
background: #FFCC66 url("sommerfugl.gif") no-repeat fixed right bottom;
Rækkefølgen for sammenskrivningen i ovenstående eksempel er således:
[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
Hvis en af egenskaberne udelades vil denne blot antage sin standard-værdi. Det vil sige at hvis background-attachment og background-position udelades ...
background: #FFCC66 url("sommerfugl.gif") no-repeat;
... vil disse blot være at regne som sat til deres standard-værdier, som er scroll og top left.
Browser-kompatibelitet
Stort set alle browsere understøtter det, du lige har lært. Hvis du er i tvivl, kan prøve dig frem eller referere til nedenstående tabel:
| Egenskab | Netscape | Internet Explorer |
|---|---|---|
| background | 4.0 | 4.0 |
| background-attachment | 6.0 | 4.0 |
| background-color | 4.0 | 4.0 |
| background-image | 4.0 | 4.0 |
| background-position | 6.0 | 4.0 |
| background-repeat | 4.0 | 4.0 |
Tabellen viser fra og med hvilken version browseren understøtter den pågældende egenskab.
I denne lektion har du lært hvad der er værd at vide om farver og baggrunde med CSS. Hvis du har været vant til at benytte HTML til at definere farver og baggrunde, har du fået en masse nye muligheder du kan bruge på dit websted.
Næste lektion handler om fonte og indeholder også mange nye spændende muligheder.
