Cómo oscurecer la imagen de fondo con CSS

¡Buenos días! En este tutorial vamos a ver cómo oscurecer con CSS una imagen que está de fondo para crear una capa transparente que contraste con los elementos que tenemos encima.

Este método también nos sirve si simplemente queremos oscurecer la imagen con CSS, sin usar JavaScript ni cualquier otro método más complicado

¬°Vamos all√°!

YouTube video

Como ya digo en el vídeo, algunos constructores visuales, y también Gutenberg ya nos permiten crear ese efecto de overlay y oscurecer una imagen. Con Gutenberg por ejemplo (con el bloque Fondo) podemos convertir fácilmente esto:

En esto:

Photo by Guillermo S√°nchez on Unsplash

Pero en algunos casos, con algunos builders o cuando simplemente escribimos un HTML a mano, no tendrémos esta opción así que vamos a ver cómo podemos oscurecer un fondo por CSS de cualquier elemento, sin tener que pasar por Photoshop.

Por cierto, échale un vistazo a esto si necesitas ver diferentes formas de insertar CSS en WordPress o cómo gestionar el CSS en WordPress como un PRO.

Paso 1: identificamos el elemento con fondo

Si hemos a√Īadido el HTML a mano no tendremos problema con esto, ya que sabemos la clase o el ID de CSS del elemento que nos interesa.

Si has creado ese fondo de otra manera, por ejemplo con un builder, simplemente vamos al Inspector de nuestro navegador (botón derecho + Inspeccionar) e identificamos el ID o la Class del elemento que nos interesa:

En mi caso es la ID #fondo así que voy a aplicarle el CSS a este elemento.

Tendr√°s que buscar un elemento que tenga declarado un fondo, es decir tenga el background-image en el CSS:

Paso 2: Damos los estilos al fondo

Si has creado el fondo por HTML necesitar√°s este paso, ya que tendr√°s que indicarle la im√°gen de fondo a este elemento y personalizarlo un poco.

Te comparto el CSS que he aplicado en el vídeo, para que lo puedas insertar con tu método de edición de CSS preferido:

#fondo {
	background-image: url(https://empresiona.com/wp-content/uploads/2019/02/guillermo-sanchez-529739-unsplash-2.jpg);
	padding: 400px 100px;
	text-align: center;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
  • Lo primero que hacemos es indicar qu√© imagen es que la tendremos de fondo (tendr√°s que cambiar la URL dentro de url() por la de la imagen que quieres mostrar)
  • Luego centramos el contenido, le damos un poco de margenes internos e indicamos que el fondo est√© centrado, no se repita y se estire al ancho y alto de su contenedor
  • Finalmente con el position:relative indicamos que el pseudo-elemento que crearemos justo ahora se tiene que mantener en los m√°rgenes de este fondo (lo entender√°s mejor si miras el v√≠deo del principio)

Aquí tendrás que cambiar el #fondo por el ID o la clase del elemento que a tí te interesa oscurecer.

Paso 3: creamos el pseudo-elemento oscurecedor

Trabajaremos con el pseudo-elemento :before, que nos permite a√Īadir contenido “antes” de nuestro elemento con fondo, para jugar con su opacidad y as√≠ oscurecer el fondo. El CSS que necesitamos es el siguiente:

#fondo:before {
	content:'';
	position: absolute;
        top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.6);
}

Lo que hacemos aquí es:

  • Indicamos que existe contenido en este pseudo-elemento
  • Se posiciona de manera absoluta, para poder estirarlo
  • Lo estiramos a todos los extremos del contenedor
  • Le damos un color de fondo negro con una opacidad 0.6

De esta manera tenemos un pseudo-elemento que se superpone a nuestro fondo y cuyo fondo y opacidad podemos governar independientemente del fondo.

Por √ļltimo, veamos los estilos que necesita nuestro texto que est√° encima del fondo.

Paso 4: estilizamos el texto

El CSS que usamos es el siguiente:

#fondo h1 {
	font-size: 60px;
	color: #fff;
	position: relative
}

Lo que hacemos es:

  • Aumentar el tama√Īo de fuente
  • Darle un color blanco
  • Posicionarlo encima del pseudo-elemento

¡Y ya estamos! De esta manera podemos crear este overlay encima de cualquier elemento por CSS sin tener que editar la imagen. A partir de aquí imaginación al poder, ya que no sólo nos sirve para oscurecer el fondo; también lo podemos aclarar o ponerle cualquier otro color jugando con su opacidad.

¬ŅHaces webs para clientes
y te has atascado en
precios bajos?

He creado un programa formativo para ayudarte a ganar m√°s dinero por cada proyecto, gestionar mejor a tus clientes y trabajar con orden y tranquilidad en tus servicios de dise√Īo y desarrollo web.