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√°!

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;
}

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:

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:

¡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.