HTML-bakgrunder kan skapas med färgvärden eller en bildfil. Att välja rätt bakgrund kan förbättra utformningen av din webbplats och samtidigt säkerställa att innehållet förblir tydligt och lättläst.

Vad är HTML-bakgrunder?

Området bakom innehållet på en webbsida kallas HTML-bakgrund. Dessa bakgrunder kan ställas in när man skapar en sida i HTML. De kan också ändras senare efter behov. Som standard är HTML-bakgrunder vita. Att ändra detta rekommenderas inte bara för att förbättra webbplatsens design, utan också för att förbättra innehållets synlighet.

Hur kan man ändra en HTML-bakgrund?

Det finns två huvudsakliga sätt att designa HTML-bakgrunder:

  • genom att tillämpa ett färgvärde
  • genom att använda en bild eller en toning

Dessa värden ställs in via HTML-attributet style. I nästa avsnitt går vi igenom båda metoderna.

Definiera HTML-bakgrunder efter färgvärde

För att ändra färgen på en HTML-bakgrund använder du attributet style och egenskapen background-color eller bgcolor. Det finns tre olika alternativ för att ange färgvärdet:

  • Färgnamn: Du kan ställa in önskad färg genom att helt enkelt använda dess namn. Förutom standardfärger som red, yellow eller green är även specialfärger som lightblue eller deepskyblue möjliga. Storleken på bokstäverna spelar ingen roll när du anger färgen.
  • Hex-färgkod: Du kan också ange färger med hjälp av deras sexsiffriga hexadecimala nummer. Detta består av tre par som består av siffrorna 0 till 9 och bokstäverna a till f. Det första paret representerar det röda värdet, det andra representerar grönt och det tredje representerar blått, där 00 är det lägsta värdet och ff det högsta. Till exempel skulle blått vara 0000ff.
  • RGB-värde: Alternativt kan du använda RGB-värdet, som också är grunden för hex-färgkoden. Värdena sträcker sig från 0 till 255 och motsvarar färgerna rött, grönt och blått. Till exempel skulle blått vara RGB (0, 0, 255).

Syntaxen du använder för att definiera önskad färg för dina HTML-bakgrunder ser ut så här:

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

I följande exempel använder vi en hexadecimal färgkod för att ange ljusblått som bakgrundsfärg:

<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>
</body>
</html>
html

Så här ser det ut:

Bild: HMTL background: Colour example
Sample HTML background with the hex code ‘#BFEFFF’.

Om det behövs kan du också definiera färger för HTML-bakgrunder separat för enskilda avsnitt på dina webbsidor. Detta görs med hjälp av attributet style och egenskapen background-color. Du kan se hur detta fungerar i följande exempel, där olika färger har ställts in för den övergripande bakgrunden, samt för bakgrunderna för <h2> rubriker och <p> textavsnitt:

<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>
</body>
</html>
html
Bild: Example: Three different coloured HTML backgrounds
Example of an HTML background with three different colours.

Ställa in bilder som HTML-bakgrunder

För att kunna använda bilder eller grafik som HTML-bakgrunder måste de sparas i bildformaten JPG, PNG, SVG, WebP eller GIF. Följande exempel visar lämplig kod för att integrera en bild som bakgrund. Sökvägen till bilden måste anpassas individuellt:

<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>
</body>
</html>
html

När du använder en bild bör du alltid tänka på att innehållet ska vara lättläst. Genom att ange ytterligare parametrar kan du justera placeringen av bilden eller grafiken så att texten syns tydligt mot bakgrunden.

Gå till huvudmeny