HOME -> CSS_TUTORIAL -> css-07 Lørdag, 21. Oktober 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
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 >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top