A background-image tulajdonság egy elem háttereként használandó képet határoz meg.
Alapértelmezés szerint a kép ismétlődik, így a teljes elemet lefedi.
Állítsa be az oldal háttérképét:
body {
background-image: url("paper.gif");
}Próbálja ki Ön is →
<!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>
Ez a példa a szöveg és a háttérkép rossz kombinációját mutatja be. A szöveg az alig olvasható:
body {
background-image: url("bgdesert.jpg");
}Próbálja ki Ön is →
<!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>
Megjegyzés: Háttérkép használatakor olyan képet használjon, amely nem zavarja a szöveget.
A háttérkép bizonyos elemekhez is beállítható, például a <p> elemhez:
p {
background-image: url("paper.gif");
}Próbálja ki Ön is →
<!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>
Beállítja egy elem háttérképét