- Cuarzo.dev
- Posts
- Cómo poner una imagen de fondo en HTML
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
Kiko Palomares
April 02, 2021 • Lo lees en: 2 minutos
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
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
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>.
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.
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.
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%.
Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!
Reply