Tilføjelse af Baggrunde med CSS

Postet Den: 19/10/2008 Kl: 15:47

Når man tilføjer baggrunde til elementer med CSS, sker det ved brugen af Baggrunds Egenskaberne i CSS. Man kan tilføje en Baggrunds Farve, og/eller et Baggrunds Billede. Man kan også bestemem om en baggrund skal være fastlåst, eller rulle med siden, hvis siden er lang nok til det.

Background Egenskaben

I det første eksempel tilføjer jeg en baggrunds-farve ved brugen af CSS background egenskaben, jeg kunne også have brugt background-color egenskaben, men background er både kortere, og nemmere at huske. Se eksemplet nedenfor:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="dan">

  <head>
    <title>Baggrunde i CSS</title>
    <style type="text/css">
    body {
     background: blue;
    }
    </style>
  </head>

  <body>
    <h1>Baggrunde i CSS</h1>
    <p>Tilføjelse af en baggrund ved brugen af CSS.</p>
  </body>
</html>

Ovenstående er en komplet kode, der sætter baggrunden for hele siden, via body. Klar til at blive kopiert og testet, nu da du har hele koden, vil jeg kun give korte eksempler, som du skal sætte ind selv.

Med baggrunds-billede

Egenskaben background bliver brugt til at sammenskrive alle egenskaberne i en, det gør det noget nemmere. Man kan også angive et baggrunds billede sammen med en farve, det gøres på følgende måde.

<style type="text/css">
body {
 background: blue url("DitBillede.png") repeat-x top left;
}
</style>

Ovenstående vil placere et billede i Venstre (left) hjørne, i toppen (top) af body, og gentage billedet imod højre, horizontalt (repeat-x). Hvis man derimod havde skrævet repeat-y, ville billedet have været placeret samme sted, men istedet gentaget imod bunden af siden.

Man kan også bruge rigtigt længdemål istedet for nøgleord som top, right, bottom, left. Det kan gøres på følgende måde.

<style type="text/css">
body {
 background: blue url("DitBillede.png") repeat-x 0% 0%;
}
</style>

Ovenstående eksempel er det samme som top left, man kan også bruge pixels og andre enheder.

Enkelte Egenskaber

Brugen af de enkelte egenskaber forøger størrelsen på din css fil, og det tager længere tid at kode. Så med mindre det er nødvendigt at bruge dem enkeltvis, så anbefales det ikke.

Background Color Egenskaben

Brugen skulle nu tale for sig selv, men jeg vil aligevæl give et eksempel.

<style type="text/css">
body {
 background-color: blue;
}
</style>

background-image Egenskaben

Igen giver jeg et eksempel.

<style type="text/css">
body {
 background-image: url("EnduEtBillede.jpg");
 background-repeat: repeat;
 background-position: 0px 0px;
}
</style>

Background-attachment Egenskaben

Til sidst vil jeg give et eksempel som fastlåser baggrunden, når du tester det skal du sikre dig at siden er lang nok til at der kommer rullepaneler.

<style type="text/css">
body {
  background-image: url("MyImage.png");
  background-repeat: repeat;
  background-attachment: fixed;
}
</style>

Du skulle også tjekke de enkelte Reference Opslag

Forfatter: BlueBoden

Kommentarer: [0]

Vejledninger

Referencer

Brugbart

Links

© Brugbart Webdesign