• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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.  

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

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.

Background Image Twenty Twenty One

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.