Offentliggjort 2002 - Opdateret n/a
CSS lektion 07 - Baggrundsfarver
Denne lektion guider dig igennem baggrundsfarver og billeder
I denne lektion skal vi se nærmere på baggrundsfarver og billeder. Vi skal her se hvilke muligheder vi har for placering af et billede. Skal billedet placeres horisontalt eller i vertikalt retning. Lektionen afsluttes med at sammenskrive hele koden til en sætning.
Følgende egenskaber for background beskrives i denne lektion:
- Color
- Background-color
- Background-image
- Background-repeat
- Background-attachment
- Background-position
- Sammenskrivning
Color
At angive tekstfarven for et element.
p {
color: #ffffff;
}
h6 {
color: red;
}
Baggrundsfarve (background-color)
Nedenfor stående eksempel viser hvordan du kan sætte baggrundsfarven for et element. Baggrunden kan også angives til at være 'transparent'.
body {
background-color: #ffffcc;
}
p {
background-color: yellow;
}
h3 {
background-color: #ccffff;
}
/* Gemmes som color.css */
<html>
<head>
<title>color</title>
<link rel="stylesheet" type="text/css" href="color.css" />
</head>
<body>
<h3>Udsnit af bogen: Dramatiske begivenheder i vort århundrede.</h3>
<p>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ..</p>
</body>
</html>
Vis som eksempel
Et billede som baggrund! (background-image)
Eksemplet viser hvordan du kan indsætte et billede som baggrund (tapetet).
body {
background-image: url("baggrund.jpg");
}
/* Gemmes som image.css */
<html>
<head>
<title>baggrund - tapet</title>
<link rel="stylesheet" type="text/css" href="image.css" />
</head>
<body>
</body>
</html>
Vis som eksempel
Gentagelse af billeder (background-repeat)
Nu skal vi se på hvordan du indsætter et billede, og hvordan du kan få dette billede gentaget i horisontal eller vertikal retning.
Dine muligheder for gentagelse af billeder er følgende:
background-repeat: repeat-x; Horisontal gentagelse af billedet.
background-repeat: repeat-y; Vertikal gentagelse af billedet.
background-repeat: repeat; Horisontal og vertikal gentagelse af billedet.
background-repeat: no-repeat; Billedet gentages ikke.
Her er vist et eksempel med vertikal gentagelse af billede.
body {
background-color: #ffffcc;
background-image: url("maleri.jpg");
background-repeat: repeat-y;
}
/* Gemmes som repeat.css */
<html>
<head>
<title>Gentagelse af billeder</title>
<link rel="stylesheet" type="text/css" href="repeat.css" />
</head>
<body>
</body>
</html>
Vis som eksempel
Fixed eller scroll (background-attachment)
Nogle gange har man brug for at låse sine billeder fast til et sted på skærmen. Det gøres på følgende måde:
body {
background-color: #ffffcc;
background-image: url("maleri.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Gemmes som attach.css */
<html>
<head>
<title>Låsning af billeder</title>
<link rel="stylesheet" type="text/css" href="attach.css" />
</head>
<body>
<h2>Prøv at scrolle ned på siden</h2><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h2>Billedet forbliver i øverste venstre hjørne.</h2><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h2>Billedet på siden er låst.</h2><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h2>Billedet forbliver stadig i øverste venstre hjørne.</h2><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Vis som eksempel
Prøv nu at ændre background-attachment til scroll!
Vis som eksempel
Positionering af billede (background-position)
Via background-position har du mulighed for at positionere dit billede. Som standard er et billede altid placeret i øverste venstre hjørne.
body {
background-color: #ffffcc;
background-image: url("maleri.jpg");
background-repeat: no-repeat;
background-position: 25% 50%;
}
/* Gemmes som position.css */
<html>
<head>
<title>Positionering af billeder</title>
<link rel="stylesheet" type="text/css" href="position.css" />
</head>
<body>
</body>
</html>
Vis som eksempel
Forklaring af eksemplet
Øverste venstre hjørne er vores udgangspunkt, og i eksemplet skal vi bevæge os 25% til højre (horisontalt) og 50% nedefter (vertikalt). Det nemmeste er, at forestille sig, at skærmen er et stort koordinatsystem med x og y akse.
Du har flere muligheder for at angive positionen af dit billede. De angivelser man mest benytter sig af er % som i eksemplet eller faste enheder som px (pixels) og cm (centimeter). Du kan også anvende betegnelser som: top - bottom - left - right - center .... Eksempel: background-position: bottom center;
Sammenskrivning
Det hele kan nu gøres en lille smule nemmere, og måske en del smartere! Der er nemlig mulighed for at sammenskrive samtlige egenskabe for background. Følgende eksempel illustrerer dette:
body {
background: #ffffcc url("maleri.jpg") no-repeat fixed center center;
}
/* Gemmes som samskriv.css */
<html>
<head>
<title>Sammenskrivning</title>
<link rel="stylesheet" type="text/css" href="samskriv.css" />
</head>
<body>
</body>
</html>
OBS!!! Det er vigtig at du sammenskriver background egenskaber i følgende rækkefølge:
[background-color] [-image] [-repeat] [-attachment] [-position]
Vis som eksempel
Så meget til background-color, repeat, attachment og andet. Prøv nu at lege en smule med de ovenfor stående eksempler.
I næste lektion skal vi se nærmere på links, og hvordan du kan give dem specielle egenskaber.
PSEUDO-CLASS .. LINK >>
|
