Sub-header Background Image

Comments

• Albert

  June 2016

  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
• beicher

  June 2016

  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.
• Albert

  June 2016

  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