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
▶ Cómo poner una IMAGEN de Fondo en HTML
Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

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