CSS-taustakuva


Sisällysluettelo

    Näytä sisällysluettelo


CSS-taustakuva

Ominaisuus background-image määrittää kuvan, jota käytetään elementin taustana.

Oletusarvoisesti kuva toistetaan niin, että se peittää koko elementin.

Esimerkki

Aseta sivun taustakuva:

body {
  background-image: url("paper.gif");
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>


Esimerkki

Tässä esimerkissä näkyy huono yhdistelmä tekstiä ja taustakuvaa. Teksti on tuskin luettavissa:

body {
  background-image: url("bgdesert.jpg");
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>


Huomaa: Kun käytät taustakuvaa, käytä kuvaa, joka ei häiritse tekstiä.

Taustakuva voidaan asettaa myös tietyille elementeille, kuten <p>-elementille:

Esimerkki

 p {
  background-image: url("paper.gif");
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>



CSS-taustakuvaominaisuus

background-image

Asettaa elementin taustakuvan