Cómo poner una imagen de fondo en HTML con CSS

En este tutorial vamos a aprender cómo poner una imagen de fondo en HTML con css. Esto es muy útil para agregar una imagen de fondo en un div o en toda la página. Sigue leyendo para aprender cómo hacerlo.


Cómo poner una imagen de fondo en HTML con CSS


Cómo poner una imagen de fondo en un div

A través de CSS, es posible poner una imagen de fondo a cualquier elemento de HTML. En este caso, haremos el tutorial con un div.

Publicidad

1. Definir la estructura de HTML

La estructura de HTML es sencilla, solo deberemos definir una clase para el div. En este caso, la clase es “div-con-fondo”.

2. Espeficar la imagen de fondo con CSS

Ahora, solo debemos definir la imagen de fondo en CSS. Esto se realiza con la propiedad background-image, de la siguiente manera:

Y ¡listo! ya tienes un div con imagen de fondo. Recuerda que debes reemplazar URL-DE-IMAGEN por la URL de la imagen que quieras usar de fondo.

Alternativa: Usar CSS en línea

Si solo deseas usar CSS en línea junto con los elementos de HTML, lo puedes hacer a través del atributo style.


Cómo poner una imagen de fondo en toda la página

Poner la imagen de fondo en toda la página es tan sencillo como hacerlo en un div. La única diferencia es que el CSS debe aplicarse al elemento body. El body es el elemento que engloba toda la página. Entonces, solo debemos aplicar el siguiente CSS:

Toma en cuenta que estamos aplicando el CSS al elemento y no a una clase. De igual forma, podemos hacer lo mismo pero con CSS en línea:


Propiedades adicionales de fondo en CSS

Ahora que aprendiste lo básico de como poner una imagen de fondo, quizás quieras definir como se ve la imagen de fondo. Para eso, se tienen las propiedades que definen otras características del fondo. Son las siguientes:

  • background-repeat: Especifica cómo se repetirá la imagen en todo el fondo. Los valores más comunes son: no-repeat, repeat, repeat-x, repeat-y.
  • background-attachment: Especifica si la imagen de fondo se desplaza o no cuando el usuario hace scroll. Los valores más comunes son: scroll, fixed.
  • background-position: Define la posición de la imagen de fondo.
  • background-size: Define el tamaño de la imagen de fondo. Puede ser: auto, cover, contain o especificar porcentaje.

Al utilizar la propiedad background-attachment, podemos imitar el efecto Parallax en una imagen de fondo con CSS. Por otro lado, por default si la imagen es más pequeña que todo el fondo, se repetirá, y esto lo puedes cambiar con: background-repeat: no-repeat.

La propiedad de background-size tiene dos valores principales: cover y contain. Con cover la imagen se acomodará en todo el contenedor, sin importar si se estira o se recorta un poco. Con contain, la imagen se mostrará en su tamaño real, sin importar si no cubre todo el contenedor. Te muestro un ejemplo de background-size a continuación:

See the Pen
Diferencia entre background-size contain y cover
by regardis (@regardis)
on CodePen.

No te preocupes si aún no entiendes cómo conseguir que la imagen de fondo se vea como tu quieras. Estamos seguros que con un poco de práctica, podrás obtener resultados geniales. Te recomendamos usar un editor de HTML y CSS online e ir probando.



También te interesaría...

Suscríbete a nuestra lista de correo

Etiquetas:,

Publicidad

Deje un comentario