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.
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,yellowellergreener det også muligt at bruge specialfarver somlightblueellerdeepskyblue. 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
0til9og bogstaverneatilf. 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ære0000ff. - RGB-værdi: Alternativt kan du bruge RGB-værdien, som også er grundlaget for hex-farvekoden. Værdierne spænder fra
0til255og 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:
<body style="background-color: value;">I det følgende eksempel bruger vi en hex-farvekode til at angive lyseblå som baggrundsfarve:
<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ådan ser det ud:
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 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>
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 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 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.