Aloha! En este tutorial vemos cómo conseguir en WordPress este efecto tan popular de tener un header transparente encima de una foto o vídeo de fondo utilizando cualquier theme de WordPress y sin plugins extra.
El resultado que buscamos es algo parecido a esto:
Lo que tenemos aquí es una sección de web con una foto o vídeo de fondo y queremos que la cabecera sea transparente y esté encima de este fondo sin taparlo.
Lo podemos conseguir con cualquier theme y cualquier constructor visual que uses, si es que usas alguno. Vamos a imaginar que partimos de esta situación, que es lo más típico:
Como puedes observar aquí tenemos un header con fondo blanco y hay espacio entre el header y la sección con la foto que queremos poner debajo.
Vamos a tener que hacer tres cosas:
- Eliminar el espacio entre el header y el fondo
- Superponer el header al fondo y hacerlo transparente
- Adaptar los estilos del header
Eliminar el espacio entre el header y la sección con el fondo
Hay varias formas de hacerlo pero la más sencilla es con CSS. Sigue los pasos del vídeo para aprender a inspeccionar con el navegador a qué clases de CSS debes apuntar para quitar el espacio vertical entre el header y el fondo. El código que he usado en el vídeo para esto es el siguiente:
.home .entry-header {
display:none
}
.home .site-inner {
padding-top:0
}Superponer el header al fondo y dejarlo transparente
Ahora para dejar el header encima del fondo debemos aplicarle el position:absolute y estirarlo al 100% de la pantalla. También le aplicamos el background-color:transparent si el header tiene algún color de fondo aplicado:
.home .site-header {
position:absolute;
width:100%;
background-color:transparent
}Adaptar los estilos del header
Finalmente ajustamos los estilos del header para que se vea bien sobre el nuevo fondo. En mi caso solo tuve que cambiar el color a los enlaces del header:
.home .site-header a {
color:#fff
}¿Quieres aprender a dejar el header fijo en la pantalla al hacer scroll? Pásate por esta guía: Header fijo en scroll