Image Behind Header In Twenty Twenty One Theme

This code adds your background image behind the site header in Twenty Twenty Two like this :

Your background image will always cover the site header container at every screen width and also display behind the mobile menu and other site header elements at every screen width.

Demo Video

Coming Soon!

Installation Steps

There’s 2 steps :

1. # Upload the folder named template-parts to your Twenty Twenty One child theme folder like this :

 


2. # Copy & paste the CSS from the style.css file to the end of your child themes style.css file.

 

Once you have completed both installation steps, you can then upload a image to your WordPress media library copy the URL and swap out the link to your background image in the CSS.

Download Folder

No Child Theme?

You can install the folder named twenty-twenty-one-child, located inside the download folder, as a new theme and activate it. You’ll still need to swap out the link to your background image in the CSS.