• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Changing background header image height in Beautiful Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing background header image height in Beautiful Pro

This topic is: not resolved

Tagged: background image, beautiful pro, site header banner

  • This topic has 13 replies, 3 voices, and was last updated 4 years, 8 months ago by Brad Dalton.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 8, 2018 at 7:59 am #218752
    gpsmapper
    Member

    The Beautiful Pro theme uses the WordPress custom background feature for a site header banner image. The setup guide says the "background image will work best if it is exactly 200px high," but I'd like to make it 300 px. Any suggestions as to how to do that?

    There is a placeholder image there now.

    https://lisaharkema.com/
    April 8, 2018 at 8:04 am #218753
    Brad Dalton
    Participant

    I see this already on line 925 :

    .beautiful .site-header-banner {
        height: 300px;
    }
    

    Get Help – Book Consultation.

    April 8, 2018 at 8:38 am #218757
    gpsmapper
    Member

    Oops, I meant to change that back to the original 200 px. Changing it to 300px didn't do anything.

    April 8, 2018 at 10:14 am #218758
    Brad Dalton
    Participant

    Whats the height of your image?

    This might help https://www.w3schools.com/cssref/css3_pr_background-size.asp


    Get Help – Book Consultation.

    April 8, 2018 at 10:21 am #218759
    gpsmapper
    Member

    The one there now is 1103x300px.

    April 8, 2018 at 10:44 am #218760
    Brad Dalton
    Participant

    I think it needs to be 2000px x 300px


    Get Help – Book Consultation.

    April 8, 2018 at 11:32 am #218767
    gpsmapper
    Member

    Hey, thanks for taking the time to help!

    I have changed the image size to 2000x300px. Do I need to modify this?...

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header .wrap {
    	padding: 40px 0;
    }
    
    .beautiful .site-header-banner {
    	height: 200px;
    }

    Changing the height to 300px still doesn't seem to change anything.

    April 8, 2018 at 11:40 am #218768
    Brad Dalton
    Participant

    Change the height to 300px and yes, it works. Make sure you clear caching.


    Get Help – Book Consultation.

    April 8, 2018 at 11:56 am #218769
    gpsmapper
    Member

    Hmm, still not working for me, despite hard refresh, purging cache at host, and trying multiple browsers.

    May 13, 2018 at 2:16 pm #219832
    gpsmapper
    Member

    I never got this resolved. Can anyone help?

    May 15, 2018 at 2:32 am #219894
    Brad Dalton
    Participant

    You can see its displaying the image 300px height

    b

    Is that not what you wanted?


    Get Help – Book Consultation.

    May 15, 2018 at 4:50 am #219896
    sumit gupta
    Member

    Hey Hi

    Even i wanted to inquire about the same so i can also fix up my blog for servo voltage stabilizers and Voltage Regulators

    May 15, 2018 at 7:06 am #219901
    gpsmapper
    Member

    Ha! I guess there was a lag in purging the cache. Thanks for your help!

    May 15, 2018 at 7:46 am #219902
    Brad Dalton
    Participant

    Chrome is very aggressively caching different types of content!


    Get Help – Book Consultation.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble