Cómo poner una imagen de fondo en HTML

En este artículo vamos a ver como puedes poner imágenes de fondo en tu página 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.


Cursos gratuitos relacionados:

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats