CSS-taustakuvan toisto

Sisällysluettelo

CSS-taustatoisto

Oletuksena background-image-ominaisuus toistaa kuvan sekä vaaka- että pystysuunnassa.

Joitakin kuvia tulee toistaa vain vaaka- tai pystysuunnassa, tai ne näyttävät oudolta, kuten:

Esimerkki

body
{
  background-image: url("gradient_bg.png");
}

Kokeile itse →

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

<h1>Hello World!</h1>
<p>Strange background image...</p>

</body>
</html>

Jos yllä oleva kuva toistetaan vain vaakasuunnassa (background-repeat: repeat-x;), tausta näyttää paremmin:

Esimerkki

body
{
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

Vinkki: Jos haluat toistaa kuvan pystysuunnassa, aseta background-repeat: repeat-y;

CSS-taustatoisto: ei toistoa

Taustakuvan näyttäminen vain kerran määritetään myös background-repeat-ominaisuuden avulla:

Esimerkki

Näytä taustakuva vain kerran:

body
{
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image only shows once, but it is disturbing the reader!</p>

</body>
</html>

Yllä olevassa esimerkissä taustakuva on sijoitettu samaan paikkaan kuin teksti. Haluamme muuttaa kuvan sijaintia, jotta se ei muutu häiritse tekstiä liikaa.

CSS-tausta-sijainti

background-position-ominaisuutta käytetään määritä taustakuvan sijainti.

Esimerkki

Aseta taustakuva oikeaan yläkulmaan:

body
{
   
background-image: url("img_tree.png");
   
background-repeat: no-repeat;
   
background-position: right top;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, the background image is only shown once. In addition it is positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>

</body>
</html>

CSS-taustatoiston ja sijainnin ominaisuudet

background-position: Asettaa taustakuvan aloituspaikan
background-repeat: Määrittää, kuinka taustakuva toistetaan