Add a Full Width Responsive Header Image to a Genesis Theme

You can add in a full width responsive image header into a Genesis child theme by using the header element and set a background image to it by setting a CSS rule.

genesis-header-logo

Using the Genesis sample theme as an example, in the above illustration the logo or site title will be handled with the .title-area div if Dynamic Text is selected or if Image Logo the .header-image .site-header .wrap CSS selector  is used,  any further header content can be dealt with by the header-right widget area. The header-right widget area is pretty straightforward as this can be accessed and populated via the widget area in the WordPress Dashboard widgets area.

The .title-area can be populated with text or a background image applied via CSS. The choice is made via the Dashboard > Genesis > Theme Settings > Header

genesis-header-title-area

 

So if the Dynamic text is selected the text that gets used is another place – Dashboard > General Settings which is both the values for Site Title and Tagline.

If Image logo is selected things are a little different, what happens is that a default logo (as shown below) appears in the header with a background image set to the following CSS rule – .header-image .site-header .wrap which displays a 360x164px  logo.png image.

genesis-header-title-logo-wrap

So what can be done is just to replace the logo with your own, and file it as logo.png in the child theme images folder replacing the existing one. Or remove that CSS rule and set the logo background to .title-area div.

The above settings may vary if you are using other Genesis themes which have had this behaviour modified.

Set the Full Width Responsive Image Header

Finally set the full width background image using the header element. The header element uses a CSS class of .site-header, CSS needs to be added to your style.css file like so:

.site-header {
background-image: url(/wp-content/uploads/2014/05/imagename.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

The image you use needs to be landscape in nature and pretty much around a minimum of 1400px in width as it is going to extend to some large monitor sizes. The key CSS rule to make it responsive is the background-size:cover; rule which will make the image cover different viewport sizes. How the image is positioned at different sizes is controlled by background-position in which you can focus on a part of the image on an horizontal and vertical position using  top, bottom , center, left or right.

You can set a height for the header or let the height be determined by its contents. Setting heights in responsive designs can be problematic, start without and see how that design flexes at smaller sizes.

Set the Full Width Responsive Image Header for certain Posts/Pages

To set the responsive image to a particular page (similar to this page)  you can use a custom CSS class just for that post/page by adding in the Custom Body-Class…

genesis-header-title-area-conditionally

Just add a unique CSS custom class name.

Then adjust your CSS rules to appear just on that pages with that CSS class…

.responsive-page .site-header {
background-image: url(/wp-content/uploads/2014/05/imagename.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

 

23 Comments

  1. Jennifer on January 8, 2020 at 12:37 pm

    Hi there.

    This works perfectly for me on desktop, but on Mobile devices, the image gets cropped. Using the Refined Pro theme. Suggestions for how to get around this?

  2. Esther on March 22, 2018 at 8:42 am

    Ah! Just realized that the header image is not a clickable link to open homepage. Any tips for this? Thank you!

  3. Esther on March 22, 2018 at 8:34 am

    I cannot thank you more. I have been struggling with this for hours today. God bless!

    • Esther on March 22, 2018 at 8:42 am

      Ah! Just realized that the header image is not a clickable link to open homepage. Any tips for this? Thank you!

  4. B on November 30, 2016 at 9:15 pm

    Worked like a charm, thanks!

  5. Mark E on July 7, 2016 at 6:06 pm

    Hello! I am trying to put a custom header image into news pro theme and I can’t figure out how to adjust the height/width in my css. Any idea where that code would be?

    THANKS!

  6. Thank you for the write-up on December 12, 2015 at 5:23 am

    Thank you for the write-up. I got the full-width header to work but I want both dynamic text AND a logo image to appear. I am having a hard time figuring out how to accomplish this. Any idea how this would be done? What is happening under the hood here to select either Dynamic Text or Image logo?

  7. Cathy on November 12, 2015 at 4:41 am

    Hi Neil,

    Just want to let you know that I benefited from this tutorial. I am looking to reduce my plugins – Genesis Simple Hooks, being one of them. Your step-by-step is brilliant. Thank you so much.

    Cathy

    • Neil Gee on November 13, 2015 at 1:28 am

      Glad it helped Cathy!

  8. Makena on August 13, 2015 at 9:43 pm

    Thank you for the write-up. I got the full-width header to work but I want both dynamic text AND a logo image to appear. I am having a hard time figuring out how to accomplish this. Any idea how this would be done? What is happening under the hood here to select either Dynamic Text or Image logo?

  9. neelesh on July 14, 2015 at 4:40 am

    i am using divi theme from themeforest.com for my website. can u pls tell me how to resize the fullwidth slider image as it appears to be to lagre and cover the whole page.well i am not a coder so please keep it simple

    • Neil Gee on July 14, 2015 at 6:50 am

      Are you having a laugh

  10. Randall on July 9, 2015 at 1:32 am

    Hey Neil:

    1. Thanks for taking the time to put this site together and share your insights. I think you are doing a great job explaining concepts that are difficult for those (including me) who are less experienced adjusting CSS, php, etc.

    2. I incorporated the CSS according to your instructions above and it worked great!

    3. I did experiment with design alterations which requires adjusting some style CSS, but purrs smoothly and is fully responsive.

    4. I did make one alteration to the CSS you include above. I would like to know your thoughts:

    .gppro-custom .site-header {
    background-image: url(XXXX);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    }

    • Neil Gee on July 9, 2015 at 1:46 am

      Thanks for the feedback Randall, I can’t see any difference to your CSS and the ones in the tut, anyway glad it worked for you!

      • Randall on July 10, 2015 at 2:05 am

        Hey Neil:

        I added “.gppro-custom” before .site-header

        Not an important issue and there is argument for minifying the CSS by excluding this.

        Are you familiar with a workaround for a site with viewport containers? If I implement the above CSS into News Pro theme, for example, it is contained within the the viewport parameters defined presumably in the child theme.

        If you have a moment, please share your thoughts.

  11. Walt Thiessen on May 28, 2015 at 9:21 pm

    I’m having trouble making this work with Genesis Dynamik. The background image goes off the screen both left-and-right. Any suggestions?

    • Neil Gee on May 28, 2015 at 11:22 pm

      I am not too familiar with Dynamik – do you have a URL with the problem?

  12. Silver Fox on March 4, 2015 at 5:19 pm

    Thanks so much for the tutorial.

    I followed the exact steps you outlined; unfortunately, however my header image is surrounded with white space and is shifted to the left of screen. Any suggestions on how I can get a full width header image in Genesis Sample Theme that is centered and not surrounded by whitespace, i.e. a header image which looks like the one in your tutorial?

    • Neil Gee on March 4, 2015 at 11:01 pm

      Do you have a link?

      • Silver Fox on March 5, 2015 at 7:16 am

        My site is currently on a local testing server, and therefore not publicaly visible. I will look to transfer it to a publicaly viewable server and will post the link.

        Thanks again for your great tutorial.

  13. Xavier on December 11, 2014 at 4:46 pm

    I added:

    .site-header {
    background-image: url(/wp-content/uploads/2014/05/imagename.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    }

    to my child themes style.css, replacing the old .site-header text but it just shows as transparent on our site. Am I missing something on this? – Genesis Education Pro theme in wordpress

    • kim on February 1, 2015 at 7:57 pm

      I am working on a site for a friend and I am experiencing the same issue. Using LifestylePro theme. http://www.thethoughtninja.com.

      • Neil Gee on February 1, 2015 at 10:28 pm

        It should work – I tested on Lifestyle Pro and was ok, I would need to see the site with the code added, the site you mention doesn’t have the CSS changes.

Leave all Comment