Obrázek pozadí CSS

Obsah

CSS obrázek na pozadí

Vlastnost background-image určuje obrázek, který se má použít jako pozadí prvku.

Ve výchozím nastavení se obrázek opakuje, takže pokrývá celý prvek.

Příklad

Nastavení obrázku na pozadí stránky:

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

Zkuste to sami →

<!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>

Příklad

Tento příklad ukazuje špatnou kombinaci textu a obrázku na pozadí. Text je těžko čitelné:

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

Zkuste to sami →

<!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>

Poznámka: Při použití obrázku na pozadí použijte obrázek, který neruší text.

Obrázek na pozadí lze také nastavit pro konkrétní prvky, jako je prvek <p>:

Příklad

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

Zkuste to sami →

<!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>

Vlastnost obrázku pozadí CSS

background-image: Nastaví obrázek pozadí pro prvek