Support Center Visit Demo License manager Buy @ envato

Sub-header Background Image

beicherbeicher
in Files & images

I am trying to adjust the sub-header background image, so that it "covers" the sub-header frame (for an example of what I am looking for, see http://www.shainblumphoto.com/project/iceland-photography/).  I tried adding the code below to the "Custom CSS" field, but the sub-header image appears to "cover" the entire browser window, not just the sub-header frame.  As a result, the image bounces around the sub-header frame depending on the size of the browser window.  How can I make the subheader background image cover the subheader frame AND "center center" it?  Any help here would be greatly appreciated.

/* Subheader */
#Subheader {
    padding: 310px 0 230px;
    background-position: center center;
    background-size: cover;
    top:0px;
    left:0px
}

Comments

  • AlbertAlbert
    Hi,

    if you look for example at http://themes.muffingroup.com/be/eco/programs/ you see that we have similar header/subheader on many demos. So what we suggest is to create extra WP instance where you can import demos and learn how some things were made. You can also send us link to page where you got it so we can have a look on it.

    Thanks!
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • beicherbeicher
    Thanks.  I've imported many of the demos, but none of them, including the "Eco" demo, has the same background properties as the link above.  Specifically, the "Eco" demo does not re-size the background image to fit the size of the header.  To address this, I added the following code to the "Custom CSS" field:

    #Header_wrapper {
        background-size: cover;
        background-position: center center;
    }

    #Subheader {
        padding: 300px 0 150px;
    }

    @media only screen and (max-width: 767px) {
    #Subheader { padding: 150px 0 75px;}
    }

    While this re-sizes the header image, there are still two problems: (1) the background image isn't centered (center center) within the header, and (2) the size of the header image bounces around --both horizontally and vertically -- based on the size of the browser window (as you'll notice in the example above, the image only re-sizes when you change the width, not height, of the browser window.  Please advise on how to solve this problem.
  • AlbertAlbert
    What's the link of page where you got above problems then? Because so far you didn't posted it yet.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.