[Resolved] Site header image

Home Forums Support Site header image

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #133833
    Mark

    Hi, is there a way to add an image to the site header area and keep the site name and tagline on top of this?
    Thanks

    #133838
    Tom
    Lead Developer
    Lead Developer

    Hi Mark,

    You should just need to go to “Customize > Site Identity” and upload a logo.

    It should show up below your site title and tagline by default.

    Let me know 🙂

    #133878
    Mark

    Hi Tom,
    Sorry – I didn’t explain that well. What I meant was, can you add a photo to the area where the site title and tagline sit? I know you can change the colour of that area (if you have the additional colours add-on), but can you load an image as a background instead (and have the site title sit on top of that?).
    Cheers
    Mark

    #133908
    bdbrown

    Hi Mark. Here’s one way to do it with css. You’ll need to adjust the sizes and locations for your site:

    /* header background image */
    .site-header {
      background: url("http://your-image-path.jpg") no-repeat center; 
      background-size: contain;
      width: 100%;
      height: 0;
      padding-top: 35%; /* (img-height / img-width * container-width) */}
    }
    
    /* position site title and tagline on top of image */
    .site-branding {
      position: absolute;
      top: 10%;
      left: 25%;
    }
    
    /* title and tagline responsive font size */
    /* ref: https://css-tricks.com/viewport-sized-typography/ */
    .site-branding p {
      font-size: 2vw;
    }
    

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    #133909
    bdbrown

    One small correction. Remove the bracket at the end of this line:

      padding-top: 35%; /* (img-height / img-width * container-width) */}
    
    #133951
    Tom
    Lead Developer
    Lead Developer

    If you want to set the header background as an image, you’ll actually only want to do the first part of the above:

    .site-header {
      background: url("http://your-image-path.jpg") no-repeat center; 
    }

    The site title and tagline will sit on top by default.

    Our Backgrounds add-on also allows you to do this through the Customizer 🙂

    #133989
    Mark

    Thanks for the CSS solution bdbrown, much appreciated!

    Tom: I bought the add-ons package last night so I’ll try that with backgrounds option, thanks 🙂

    #134100
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.