Ominaisuus background-image
määrittää kuvan, jota käytetään elementin taustana.
Oletusarvoisesti kuva toistetaan niin, että se peittää koko elementin.
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>
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:
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>
Asettaa elementin taustakuvan