Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

Indsættelse af baggrunde med CSS

Vejledning til indsættelse af Baggrunde i CSS på Dansk.

Oprettet: 2011-03-26 08:17

Stort set alle elementer kan have en baggrund, og det er nemt at tilføje baggrunde med CSS.

Når man tilføjer baggrunde med CSS, sker det ved brug af Baggrunds Egenskaberne, hvor man kan angive alt fra farve til billede.

Tilføjelse af baggrundsbilleder med CSS

Når du skal tilføje en baggrund, kan du gøre det nemt og hurtigt ved brugen af background egenskaben, men du kan også bruge de individuelle egenskaber fra baggrunds referencen.

Lad os starte med at tilføje en baggrund til body elementet på en side. For at gøre det, så tilføjer vi CSS koden fra nedenstående eksempel, til et style element i toppen af sidens kildekode.

body {
  background: url("http://saek.brugbart.dk/mappen-billeder/baggrund1.png") repeat top left;
}

Ovenstående vil tilføje en baggrund, som gentager sig selv over siden. Billedet er ikke stort nok til at dække hele siden, og vil derfor gentage sig. Hvis vi ikke ønsker at baggrunden skal gentage sig, så skal vi bruge no-repeat i stedet for repeat indstillingen.

top left angivelsen er placeringen hvor fra baggrunden starter, her kan man enten bruge et nøgleord, som jeg har valgt her, eller en længdeenhed som px eller procent.

Den fulde HTML og CSS kan ses nedenfor, hvis du klikker på linket under koden, ses et eksempel i din browser.

<!DOCTYPE html>
<html lang="da">

  <head>
    <title>Tilføjelse af baggrunde med CSS</title>
    <style type="text/css">
body {
  background: url("http://saek.brugbart.dk/mappen-billeder/baggrund1.png") repeat top left;
}
    </style>
  </head>

  <body>
    <h1>Tilføjelse af baggrunde med CSS</h1>
    <p>Synet viser hvordan man tilføjer baggrunde med CSS. Du kan tjekke kildekoden for denne side, for at se hvordan baggrunden er blevet tilføjet.</p>
    <p>Hvis du har kommentarer til dette eksempel, så kan du besøge Vejledningen: <a href="http://brugbart.dk/Vejledninger/css-baggrunde">Baggrunde med CSS</a></p>
  </body>

</html>

Brugbart Syn!

Tilføjelse af baggrundsfarver med CSS

Baggrundsfarver kan også indsættes med background egenskaben, faktisk kan man både have en baggrundsfarve og et baggrundsbillede. Hvis man bruger no-repeat indstillingen sammen med et en background, der har angivet både billede og farve, så vil farven udfylde resten af det område som baggrundsbilledet ikke kunne fylde. Det kan være særligt nyttigt når man bruger gennemsigtige baggrundsbilleder, og forskellige tonede baggrunde.

body {
  background: #808000 url("http://saek.brugbart.dk/mappen-billeder/baggrund1.png") repeat top left;
}

Den første angivelse ovenfor #808000, er hex værdien for en farve. Du kan nemt finde flere farver med dit favorit program, eksempelvis gratis programmet Paint.NET eller Gimp.

Du kan også nøjes med kun at angive en baggrundsfarve, det gøres ved at slette baggrundsbilledet, og de ekstra angivelser for enden.

body {
  background: #808000;
}