• 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

Layer Logo Over Header Background Image in Genesis

This tutorial provides the solution which enables you to float your logo over the top of a background image in your header.

logo-over-background-image

Both the logo & background images are added via the WordPress customizer.

Update : See this new tutorial : Logo Over Full Width Header Image

You can set a fallback for the background image which you can add to your child themes images folder.

Demo Video

As you can see in the video, all header elements display over the site headers background image including the widget(s) added to the header right widget area.

The site title & description will also display if no header image ( logo ) is added via the customizer.

The tutorial also provides very simple instructions and line numbers on how to change the CSS in your style.css file for the height of both your logo and the background header image so you can match these to your images.

The code is tested on the Genesis Sample child theme by StudioPress and may need modifying for use on other Genesis child themes.

The solution is also pre-installed in a modified copy of the Genesis Sample theme.

Here’s the download & instructions for members:

Register for full access

Related Tutorials

  • Display Logo Over Header Background Image in Genesis

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.