Cómo poner una IMAGEN de Fondo en HTML

Imágenes de fondo

Casi todos los elementos HTML pueden tener una imagen de fondo.

Para añadir una imagen de fondo se usa la propiedad de CSS background-image

See the Pen HTML | 1.17 - Imágenes de fondo - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Añadir la imagen de fondo

Lo podemos hacer de varias formas:

  • Con el atributo style
  • Definiéndolo dentro del elemento <style>
  • O en un archivo CSS externo

See the Pen HTML | 1.17 - Imágenes de fondo - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Fondo de la página

Para añadir una imagen de fondo a toda la página tenemos que especificar el background-image para el elemento <body>.

See the Pen HTML | 1.17 - Imágenes de fondo - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

background-repeat

Si usas una imagen de fondo pequeña por defecto esta se repetirá horizontal y verticalmente hasta que rellene todo el elemento.

Si no queremos que se repita podemos usar la propiedad background-repeat con el valor no-repeat.

See the Pen HTML | 1.17 - Imágenes de fondo - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

background-size: cover

Si queremos que la imagen de fondo cubra el elemento entero podemos usar la propiedad background-size con el valor cover.

De este modo la imagen cubrirá todo el elemento sin deformarse.

See the Pen HTML | 1.17 - Imágenes de fondo - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Imagen “estirada”

Si queremos que la imagen de fondo cubra el elemento pero deformandose a la proporción de este, tenemos que poner el background-size a 100% 100%.

See the Pen HTML | 1.17 - Imágenes de fondo - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.