La propiedad imagen de fondo especifica una imagen para usar como fondo de un elemento.
De forma predeterminada, la imagen se repite para cubrir todo el elemento.
Establecer la imagen de fondo de una página:
body {
background-image: url("paper.gif");
}Pruébelo usted mismo →
<!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>
Este ejemplo muestra una combinación incorrecta de texto e imagen de fondo. El texto es difícilmente legible:
body {
background-image: url("bgdesert.jpg");
}Pruébelo usted mismo →
<!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>
Nota: Cuando utilice una imagen de fondo, utilice una imagen que no perturbe el texto.
La imagen de fondo también se puede configurar para elementos específicos, como el elemento <p>:
p {
background-image: url("paper.gif");
}Pruébelo usted mismo →
<!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>
Establece la imagen de fondo de un elemento.