Hur man anpassar HTML-bakgrunder med färger eller bilder
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,yellowellergreenär även specialfärger somlightblueellerdeepskybluemö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
0till9och bokstävernaatillf. 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 vara0000ff. - 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
0till255och 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;">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>Så här ser det ut:
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>
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>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.