# Kuinka mukauttaa HTML-taustoja väreillä tai kuvilla HTML-taustat voidaan luoda väriarvoilla tai kuvatiedostolla. Oikean taustan valinta voi parantaa verkkosivustosi ulkoasua ja samalla varmistaa, että sisältösi pysyy selkeänä ja helppolukuisena. ## Mitä ovat HTML-taustat? Verkkosivun **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. Oletuksena HTML-taustat ovat valkoisia. Tämän muuttaminen on suositeltavaa paitsi verkkosivuston ulkoasun parantamiseksi myös sisällön näkyvyyden parantamiseksi. ## Kuinka HTML-taustaa voidaan muuttaa? HTML-taustojen suunnittelussa on kaksi pääasiallista tapaa: - **soveltamalla väriarvoa** - **käyttämällä kuvaa tai liukuväritystä** Nämä arvot asetetaan HTML-attribuutin `style` avulla. Seuraavissa osioissa käymme läpi molemmat menetelmät. Vinkki Lisätietoja HTML-tyylitunnisteen mahdollisuuksista löydät aiheesta kirjoittamastamme artikkelista. ### HTML-taustojen määrittäminen väriarvon perusteella HTML-taustan värin muuttamiseksi käytä `style` -attribuuttia ja `background-color` tai `bgcolor` ominaisuutta. **Värin arvon** määrittämiseen on kolme eri vaihtoehtoa: - **Värin nimi**: Voit asettaa haluamasi värin yksinkertaisesti käyttämällä sen nimeä. Vakiovärien, kuten `red`, `yellow` tai `green`, lisäksi myös erikoisvärit, kuten `lightblue` tai `deepskyblue`, ovat mahdollisia. Värin määrittämisessä ei ole merkitystä, onko nimi kirjoitettu isoilla tai pienillä kirjaimilla. - **Hex-värikoodi**: Voit määrittää värit myös kuusimerkkisellä heksadesimaaliluvulla. Se koostuu kolmesta parista, jotka muodostuvat numeroista `9` ja kirjaimista `f`. Ensimmäinen pari edustaa punaista arvoa, toinen vihreää ja kolmas sinistä, jossa 00 on pienin arvo ja ff suurin. Esimerkiksi sininen olisi `0000ff`. - **RGB-arvo**: Vaihtoehtoisesti voit käyttää RGB-arvoa, joka on myös heksadesimaalisen värikoodin perusta. Arvot vaihtelevat välillä `255` ja vastaavat värejä punainen, vihreä ja sininen. Esimerkiksi sininen olisi RGB (0, 0, 255). HTML-taustojen halutun värin määrittämiseen käytettävä syntaksi on seuraavanlainen: ```html ``` Seuraavassa esimerkissä käytämme heksadesimaali-värikoodia määrittämään vaaleansinisen taustaväriksi: ```html background-example

Here’s your heading

Here’s your website content.

``` Näin se näyttää: [![Kuva: HMTL background: Colour example](https://www.ionos.com/fi-fi/digitalguide/fileadmin/_processed_/1/5/csm_html-color-background-example_fa19e51324.webp "HMTL background: Colour example")](https://www.ionos.com/fi-fi/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-color-background-example.png) Sample HTML background with the hex code ‘#BFEFFF’. Tarvittaessa voit myös määrittää HTML-taustojen värit erikseen verkkosivujesi yksittäisille osioille. Tämä tehdään käyttämällä `style` ja `background-color`. Voit nähdä, miten tämä toimii seuraavassa esimerkissä, jossa on asetettu eri värit koko taustalle sekä `

` otsikon ja `

` tekstiosion taustalle: ```html background-example

The background of this headline is set to DodgerBlue.

This background is set to DarkTurquoise.

``` [![Kuva: Example: Three different coloured HTML backgrounds](https://www.ionos.com/fi-fi/digitalguide/fileadmin/_processed_/b/1/csm_html-background-example-2_a5a13bd28c.webp "Example: Three different coloured HTML backgrounds")](https://www.ionos.com/fi-fi/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-background-example-2.png) Example of an HTML background with three different colours. ### Kuvien asettaminen HTML-taustakuviksi Jotta kuvia tai grafiikkaa voidaan käyttää HTML-taustana, ne on tallennettava *JPG-*, *PNG-*, *SVG-*, *WebP* *-* tai GIF-kuvamuodossa. Seuraava esimerkki näyttää sopivan koodin kuvan integroimiseksi taustaksi. Kuvan polku on mukautettava yksilöllisesti: ```html background-example

Here’s your heading

Here’s your website content.

``` Kun käytät kuvaa, sinun tulee aina pitää mielessä sisällön luettavuus. Määrittämällä lisäparametreja voit säätää kuvan tai grafiikan **sijaintia**, jotta teksti erottuu taustasta. This is a markdown version of: [https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/html-taustat/](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/html-taustat/) for AI/LLM consumption.