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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme

This tutorial enables you to add a hero image with overlaying content behind your site header and nav menu like this :

Tested using the latest version of the Genesis Sample child theme by StudioPress, this solution works with or without Gutenberg blocks on the home page.

Demo Video

Shows a full screen width image behind the site header and menu in the Genesis Sample theme. Shows the image can be changed using the Hero Image setting in the customizer. Displays HTML content from the Hero Text widget area.

Installation Steps

There’s 4 steps :

  1. # Upload the files named front-page.php and hero.js to the your theme folder like this :
  2.  

    Step 1

  3. # Copy & paste the PHP code from functions.php file to the end of your Genesis Sample themes functions file
  4.  

    Step 2

  5. # Copy & paste the CSS from the style.css file to the end of your themes style sheet and clear caching.
  6.  

    Step 3

  7. # From your WordPress Dashboard, go to Appearance > Widgets and copy the demo HTML for the hero text into a HTML widget in the Hero Text widget area.
  8.  

    Step 4

Once you’ve completed the steps, you can then add a image using the customizer or upload an image file named hero.jpg directly to your child themes images folder.

Download Folder

Related Tutorials

  • Hero Image Behind Site Header & Menu With Text Overlay In Genesis Sample Theme
  • Hero Image Behind Site Header & Menu With Unique Text Overlay In Genesis Sample Theme

After Header Image Header Image jQuery Scroll

Reader Interactions

Comments

  1. Jonathon Fowler says

    December 20, 2020 at 6:06 pm

    I was previously using Layerslider, and it would display the full height of the image even on a mobile device, as you move up to larger screens, such as my desktop, the image would display more of the width, and if you rotate the screen to landscape proportions,m it would display the entire image.

    How do I change CSS to display full height, the above doesn’t work on all proportions of screen? Thank you.

    Log in to Reply
    • Brad Dalton says

      December 21, 2020 at 10:37 am

      I don’t have the CSS for this as its something i would need to spend some time on to work out but it would involve modifying the default CSS i provided with new values in order to work with your new image size. I do provide limited PHP modification support included in membership at no additional charge however CSS modifications are either billable or something you will need to spend time on yourself.

      Log in to Reply
  2. Jonathon Fowler says

    December 20, 2020 at 9:58 am

    Thanks, I did that, and it works up to about 90% full screen, then when I go full screen it cuts off the bottom of the image – it’s like it wants to do full width but not full height.

    Log in to Reply
  3. Jonathon Fowler says

    December 18, 2020 at 6:54 pm

    Hi, the default hero image size is 1600 x 800, how do I change this to accommodate a larger image, say 1920 x 1080? Thanks.

    Log in to Reply
    • Brad Dalton says

      December 19, 2020 at 2:37 am

      Link to your site please. You can change the values in the CSS.

      Log in to Reply
      • Jonathon Fowler says

        December 19, 2020 at 8:21 am

        Hi Brad, it’s https://loveweddingphotosandfilm.co.uk/

        Log in to Reply
        • Jonathon Fowler says

          December 19, 2020 at 8:22 am

          Ideally, I want to be able to add an image with the proportions of 6 x 4, thank you.

          Log in to Reply
          • Brad Dalton says

            December 20, 2020 at 7:53 am

            Try changing the value for the height in this CSS rule

            .hero-image {
                height: 100vh;
            }
          • Jonathon Fowler says

            December 20, 2020 at 9:38 am

            Thanks. I already have this in my css file:

            .hero-image {
              background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)), url("https://loveweddingphotosandfilm.co.uk/wp-content/uploads/Wedding-Photo-Of-The-Year-Edinburgh-Wedding-Photographer-Balmoral-Hotel-Wedding.jpg");
              height: 100%;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              position: relative;
            }

            I tried changing height: 100% to height: 100vh; but the image still doesn’t display full height, it’s cropping the image when viewed on a desktop.

          • Brad Dalton says

            December 20, 2020 at 9:45 am

            Add another rule after that one anc clear caching. It worked when i tested it in the browser.

  4. Kandyce Clark says

    June 3, 2020 at 4:21 am

    ok! I will double check and make sure I did not mess up any code because it is not showing up transparent for me after uploading my logo

    Log in to Reply
    • Brad Dalton says

      June 3, 2020 at 4:39 am

      If you also want it transparent on scroll, add this CSS to the end of your style sheet and clear caching :

      @media only screen and (min-width: 960px) {
      
          .white .site-header {
              background-color: transparent!important;
          }
      
      }
      Log in to Reply
  5. Kandyce Clark says

    June 3, 2020 at 3:16 am

    Not sure whats going on, but i followed the steps exactly and the image is not showing

    Log in to Reply
    • Brad Dalton says

      June 3, 2020 at 3:20 am

      I emailed you a copy of the text theme which includes the code installed. Did you add a widget to the widget area? Otherwise please send me FTP access.

      Log in to Reply
      • Kandyce Clark says

        June 3, 2020 at 3:36 am

        Thanks for sending it! It is working perfectly now! 🙂

        Log in to Reply
      • Kandyce Clark says

        June 3, 2020 at 3:46 am

        I’m sorry actually is there a way to make the header transparent when a logo image is present?

        Log in to Reply
        • Brad Dalton says

          June 3, 2020 at 3:57 am

          The site header is transparent when a logo is added using Customize > Site Identity > Logo

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems