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 de tamaño de fondo para que cubra. Además, para asegurarte de que todo el elemento esté siempre cubierto, establece la propiedad background-attachment en fijo. 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>