Imagen de fondo HTML

Se puede especificar una imagen de fondo en casi cualquier elemento HTML.

Imagen de fondo en un elemento HTML

Para agregar una imagen de fondo en un elemento HTML, usa el atributo de estilo HTML y la propiedad CSS background-image.

Ejm

<div style="background-image: url('img_girl.jpg');">

También puedes especificar la imagen de fondo en el elemento <style>.

Ejm

<style>
div {
  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 que llegue al final del elemento.

Ejm

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

Para evitar que la imagen de fondo se repita, usa la propiedad background-repeat.

Ejm

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

Cubierta de imagen

Si deseas que la imagen de fondo cubra todo el elemento, puedes establecer la propiedad background-size para cubrir.

Además, para asegurarte de que todo el elemento esté siempre cubierto, establece la propiedad background-attach en fixed.

La imagen cubrirá todo el elemento, sin estiramiento, 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>

Estiramiento de fondo

Si deseas que el estiramiento de la imagen de fondo se ajuste a toda la imagen en 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>