HTML-bakgrunner kan opprettes med fargeverdier eller en bildefil. Å velge riktig bakgrunn kan forbedre utformingen av nettstedet ditt, samtidig som det sikrer at innholdet forblir klart og lett å lese.

Hva er HTML-bakgrunner?

Området bak innholdet på en webside kalles HTML-bakgrunn. Disse bakgrunnene kan angis når du oppretter en side i HTML. De kan også endres senere etter behov. Som standard er HTML-bakgrunner hvite. Det anbefales ikke bare å endre dette for å forbedre utformingen av et nettsted, men også for å forbedre synligheten til innholdet.

Hvordan kan en HTML-bakgrunn endres?

Det er to hovedmåter å designe HTML-bakgrunner på:

  • ved å bruke en fargeverdi
  • ved å bruke et bilde eller en gradient

Disse verdiene angis gjennom HTML-attributtet style. I de neste avsnittene vil vi gå gjennom begge metodene.

Definere HTML-bakgrunner etter fargeverdi

For å endre fargen på en HTML-bakgrunn, bruk attributtet style og egenskapen background-color eller bgcolor. Det finnes tre forskjellige alternativer for å angi fargeverdien:

  • Fargenavn: Du har muligheten til å angi ønsket farge ved å bruke navnet. I tillegg til standardfarger som red, yellow eller green, er også spesialfarger som lightblue eller deepskyblue mulige. Store og små bokstaver spiller ingen rolle når du angir fargen.
  • Heksadesimal fargekode: Du kan også angi farger ved å bruke det sekssifrede heksadesimaltallet. Dette består av tre par som består av sifrene 0 til 9 og bokstavene a til f. Det første paret representerer rødverdien, det andre representerer grønn og det tredje representerer blå, hvor 00 er den laveste verdien og ff den høyeste. For eksempel vil blå være 0000ff.
  • RGB-verdi: Alternativt kan du bruke RGB-verdien, som også er grunnlaget for heksadesimalkoden. Verdiene varierer fra 0 til 255 og tilsvarer fargene rød, grønn og blå. For eksempel vil blå være RGB (0, 0, 255).

Syntaksen du bruker for å definere ønsket farge for HTML-bakgrunner ser slik ut:

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

I følgende eksempel bruker vi en heksadesimal fargekode for å angi lyseblått som bakgrunnsfarge:

<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

Slik ser det ut:

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

Om nødvendig kan du også definere farger for HTML-bakgrunner separat for enkelte deler av nettsidene dine. Dette gjøres ved hjelp av attributtet style og egenskapen background-color. Du kan se hvordan dette fungerer i følgende eksempel, hvor forskjellige farger er angitt for den generelle bakgrunnen, samt for bakgrunnen til <h2> overskrifter og <p> tekstdeler:

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

Angi bilder som HTML-bakgrunner

For å kunne bruke bilder eller grafikk som HTML-bakgrunner, må de lagres i bildeformatene JPG, PNG, SVG, WebP eller GIF. Følgende eksempel viser riktig kode for å integrere et bilde som bakgrunn. Stien til bildet må justeres individuelt:

<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 bruker et bilde, bør du alltid ha lesbarheten av innholdet i tankene. Ved å spesifisere tilleggsparametere kan du justere plasseringen av bildet eller grafikken for å sikre at teksten skiller seg ut fra bakgrunnen.

Go to Main Menu