HTML-taustat voidaan luoda vä­riar­voil­la tai ku­va­tie­dos­tol­la. Oikean taustan valinta voi parantaa verk­ko­si­vus­to­si ulkoasua ja samalla varmistaa, että sisältösi pysyy selkeänä ja help­po­lu­kui­se­na.

Mitä ovat HTML-taustat?

Verk­ko­si­vun sisällön takana olevaa aluetta kutsutaan HTML-taustaksi. Nämä taustat voidaan asettaa, kun sivua luodaan HTML-kielellä. Niitä voidaan myös muokata myöhemmin tarpeen mukaan. Ole­tuk­se­na HTML-taustat ovat valkoisia. Tämän muut­ta­mi­nen on suo­si­tel­ta­vaa paitsi verk­ko­si­vus­ton ulkoasun pa­ran­ta­mi­sek­si myös sisällön nä­ky­vyy­den pa­ran­ta­mi­sek­si.

Kuinka HTML-taustaa voidaan muuttaa?

HTML-taustojen suun­nit­te­lus­sa on kaksi pää­asial­lis­ta tapaa:

  • so­vel­ta­mal­la väriarvoa
  • käyt­tä­mäl­lä kuvaa tai liu­ku­vä­ri­tys­tä

Nämä arvot asetetaan HTML-att­ri­buu­tin style avulla. Seu­raa­vis­sa osioissa käymme läpi molemmat me­ne­tel­mät.

HTML-taustojen mää­rit­tä­mi­nen väriarvon pe­rus­teel­la

HTML-taustan värin muut­ta­mi­sek­si käytä style -att­ri­buut­tia ja background-color tai bgcolor omi­nai­suut­ta. Värin arvon mää­rit­tä­mi­seen on kolme eri vaih­toeh­toa:

  • Värin nimi: Voit asettaa haluamasi värin yk­sin­ker­tai­ses­ti käyt­tä­mäl­lä sen nimeä. Va­kio­vä­rien, kuten red, yellow tai green, lisäksi myös eri­kois­vä­rit, kuten lightblue tai deepskyblue, ovat mah­dol­li­sia. Värin mää­rit­tä­mi­ses­sä ei ole mer­ki­tys­tä, onko nimi kir­joi­tet­tu isoilla tai pienillä kir­jai­mil­la.
  • Hex-värikoodi: Voit määrittää värit myös kuusi­merk­ki­sel­lä hek­sa­de­si­maa­li­lu­vul­la. Se koostuu kolmesta parista, jotka muo­dos­tu­vat nu­me­rois­ta 9 ja kir­jai­mis­ta f. En­sim­mäi­nen pari edustaa punaista arvoa, toinen vihreää ja kolmas sinistä, jossa 00 on pienin arvo ja ff suurin. Esi­mer­kik­si sininen olisi 0000ff.
  • RGB-arvo: Vaih­toeh­toi­ses­ti voit käyttää RGB-arvoa, joka on myös hek­sa­de­si­maa­li­sen vä­ri­koo­din perusta. Arvot vaih­te­le­vat välillä 255 ja vastaavat värejä punainen, vihreä ja sininen. Esi­mer­kik­si sininen olisi RGB (0, 0, 255).

HTML-taustojen halutun värin mää­rit­tä­mi­seen käy­tet­tä­vä syntaksi on seu­raa­van­lai­nen:

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

Seu­raa­vas­sa esi­mer­kis­sä käytämme hek­sa­de­si­maa­li-vä­ri­koo­dia mää­rit­tä­mään vaa­lean­si­ni­sen taus­ta­vä­rik­si:

<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

Näin se näyttää:

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

Tar­vit­taes­sa voit myös määrittää HTML-taustojen värit erikseen verk­ko­si­vu­je­si yk­sit­täi­sil­le osioille. Tämä tehdään käyt­tä­mäl­lä style ja background-color. Voit nähdä, miten tämä toimii seu­raa­vas­sa esi­mer­kis­sä, jossa on asetettu eri värit koko taustalle sekä <h2> otsikon ja <p> teks­tio­sion taustalle:

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

Kuvien aset­ta­mi­nen HTML-taus­ta­ku­vik­si

Jotta kuvia tai gra­fiik­kaa voidaan käyttää HTML-taustana, ne on tal­len­net­ta­va JPG-, PNG-, SVG-, WebP - tai GIF-ku­va­muo­dos­sa. Seuraava esimerkki näyttää sopivan koodin kuvan in­tegroi­mi­sek­si taustaksi. Kuvan polku on mu­kau­tet­ta­va yk­si­löl­li­ses­ti:

<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

Kun käytät kuvaa, sinun tulee aina pitää mielessä sisällön luet­ta­vuus. Mää­rit­tä­mäl­lä li­sä­pa­ra­met­re­ja voit säätää kuvan tai grafiikan sijaintia, jotta teksti erottuu taustasta.

Siirry pää­va­lik­koon