# Sådan tilpasser du HTML-baggrunde med farver eller billeder

HTML-baggrunde kan oprettes med farveværdier eller en billedfil. Valg af den rigtige baggrund kan forbedre designet af din hjemmeside og samtidig sikre, at dit indhold forbliver klart og let at læse.

## Hvad er HTML-baggrunde?

**Området bag indholdet** på en webside kaldes HTML-baggrunden. Disse baggrunde kan indstilles, når man opretter en side i HTML. De kan også ændres senere efter behov. Som standard er HTML-baggrunde hvide. Det anbefales ikke kun at ændre dette for at forbedre designet af et websted, men også for at forbedre indholdets synlighed.

## Hvordan kan en HTML-baggrund ændres?

Der er to hovedmåder at designe HTML-baggrunde på:

- **ved at anvende en farveværdi**
- **ved at bruge et billede eller en farveovergang**

Disse værdier indstilles via HTML-attributten `style`. I de næste afsnit vil vi gennemgå begge metoder.

Tip Du kan læse mere om mulighederne med HTML-stiltagget i vores artikel om emnet.

### Definition af HTML-baggrunde efter farveværdi

For at ændre farven på en HTML-baggrund skal du bruge attributten `style` og egenskaben `background-color` eller `bgcolor`. Der er tre forskellige muligheder for at angive **farveværdien**:

- **Farvenavn**: Du har mulighed for at indstille den ønskede farve ved blot at bruge dens navn. Ud over standardfarver som `red`, `yellow` eller `green` er det også muligt at bruge specialfarver som `lightblue` eller `deepskyblue`. Der er ingen forskel på store og små bogstaver, når du angiver farven.
- **Hex-farvekode**: Du kan også angive farver ved hjælp af deres sekscifrede hexadecimale tal. Dette består af tre par, der består af cifrene `0` til `9` og bogstaverne `a` til `f`. Det første par repræsenterer den røde værdi, det andet repræsenterer grøn, og det tredje repræsenterer blå, hvor 00 er den laveste værdi og ff den højeste. For eksempel ville blå være `0000ff`.
- **RGB-værdi**: Alternativt kan du bruge RGB-værdien, som også er grundlaget for hex-farvekoden. Værdierne spænder fra `0` til `255` og svarer til farverne rød, grøn og blå. For eksempel vil blå være RGB (0, 0, 255).

Den syntaks, du bruger til at definere den ønskede farve til dine HTML-baggrunde, ser sådan ud:

```html
<body style="background-color: value;">
```

I det følgende eksempel bruger vi en hex-farvekode til at angive lyseblå som baggrundsfarve:

```html
<html lang="en">
<head>
<title>background-example</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
<div class="hash d-none" hidden>hash_375bdc3150a96785576de51b6a3dc0e7bdeea423</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Sådan ser det ud:

[![Billede: HMTL background: Colour example](https://www.ionos.com/da-dk/digitalguide/fileadmin/_processed_/1/5/csm_html-color-background-example_fa19e51324.webp "HMTL background: Colour example")](https://www.ionos.com/da-dk/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-color-background-example.png) Sample HTML background with the hex code ‘#BFEFFF’. Om nødvendigt kan du også definere farver til HTML-baggrunde separat for de enkelte sektioner på dine websider. Dette gøres ved hjælp af attributten `style` og egenskaben `background-color`. Du kan se, hvordan dette fungerer i det følgende eksempel, hvor der er indstillet forskellige farver for den overordnede baggrund samt for baggrunden for `<h2>` overskrifter og `<p>` tekstsektioner:

```html
<html lang="en">
<head>
<title>background-example</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>The background of this headline is set to DodgerBlue.</h2>
<p>This background is set to DarkTurquoise.</p>
<div class="hash d-none" hidden>hash_375bdc3150a96785576de51b6a3dc0e7bdeea423</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

[![Billede: Example: Three different coloured HTML backgrounds](https://www.ionos.com/da-dk/digitalguide/fileadmin/_processed_/b/1/csm_html-background-example-2_a5a13bd28c.webp "Example: Three different coloured HTML backgrounds")](https://www.ionos.com/da-dk/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-background-example-2.png) Example of an HTML background with three different colours. ### Indstilling af billeder som HTML-baggrunde

For at kunne bruge billeder eller grafik som HTML-baggrunde skal de gemmes i billedformaterne *JPG*, *PNG*, *SVG*, *WebP* eller *GIF*. Følgende eksempel viser den korrekte kode til at integrere et billede som baggrund. Stien til billedet skal tilpasses individuelt:

```html
<html lang="en">
<head>
<title>background-example</title>
<style>
	body { background-image: url('/user/folder/assets/background/img/image.svg');	background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
<div class="hash d-none" hidden>hash_375bdc3150a96785576de51b6a3dc0e7bdeea423</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Når du bruger et billede, skal du altid have indholdets læsbarhed i tankerne. Ved at angive yderligere parametre kan du justere **placeringen** af billedet eller grafikken for at sikre, at teksten kan skelnes fra baggrunden.


This is a markdown version of: [https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/html-baggrunde/](https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/html-baggrunde/) for AI/LLM consumption.