Se puede especificar una imagen de fondo para casi cualquier elemento HTML. Para agregar una imagen de fondo en un elemento HTML, usa el atributo HTML style y la propiedad de background-image de CSS.
Ejm
<p style="background-image: url('img_girl.jpg');">También puedes especificar la imagen de fondo en el elemento <style>, en la sección <head>.
Ejm
<style>
p {
background-image: url('img_girl.jpg');
}
</style>Imagen de fondo en una página
Si deseas que toda la página tenga una imagen de fondo, debes especificar la imagen de fondo en el elemento <body>.
Ejm
<style>
body {
background-image: url('img_girl.jpg');
}
</style>Background repeat
Si la imagen de fondo es más pequeña que el elemento, la imagen se repetirá, horizontal y verticalmente, hasta llegar al final del elemento:
Ejm
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>Portada de fondo
Si deseas que la imagen de fondo cubra todo el elemento, puedes configurar la propiedad background-size para que cubra. Además, para asegurarte de que todo el elemento esté siempre cubierto, establece la propiedad background-attachment en fixed. De esta forma, la imagen de fondo cubrirá todo el elemento, sin estirarse (la imagen mantendrá sus proporciones originales).
Ejm
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>Background stretch (estiramiento de fondo)
Si deseas que la imagen de fondo se estire para adaptarse a todo el elemento, puedes establecer la propiedad background-size en 100 % 100 %:
Ejm
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>