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 :

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

 <img data-attachment-id="109601" data-permalink="https://wpsites.net/genesis-tutorials/image-behind-header-in-twenty-twenty-one-theme/attachment/109598-step-1/" data-orig-file="https://mldlxoe9efl0.i.optimole.com/cb:jlsD~46cf9/w:auto/h:auto/q:mauto/f:best/https://i0.wp.com/wpsites.net/wp-content/uploads/2022/05/109598-step-1.png?fit=670%2C143&ssl=1" data-orig-size="670,143"