Resize Header Image

• 

  guruspelomundo · Member · Jun 4, 2017 at 3:52 am

  • Copy link
  • Add topic to favorites

  Hello, how can I widen the header image height?

  Thank you.

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Jun 5, 2017 at 9:38 am

  • Copy link

  Hello @guruspelomundo
  Try this CSS to increase the height of the header image area:

  .header {
      padding: 110px 0;  /*change 110px to adjust to your liking's*/
  }

  Hope this helps 🙂

• 

  guruspelomundo · Member · Jun 5, 2017 at 11:07 pm

  • Copy link

  Dear @otpidusprime thanks for your answer. It worked!

  The only problem was with the mobile website, the image gets cropped. How do I fix it?

  Thanks again!

• 

  otpidusprime · Member · Jun 6, 2017 at 10:27 am

  • Copy link

  @guruspelomundo

  thanks for your answer. It worked!

  You’re most welcome! 😇
   

  The only problem was with the mobile website, the image gets cropped. How do I fix it?

  the image is getting cropped because it is being set to fill the entire header area on all display sizes using this CSS property:
  background-size: cover;

  You can resolve this by changing ‘cover’ to ‘contain’:
  background-size: contain;
  like this:

  .bg-image {
      background-size: contain;
  }

  It will prevent the image from being cropped but it will leave out black borders sometimes at the top & bottom, and sometimes at left & right sides of the image.

  So the best option in this case would be to edit your image so that, the focus of your image data(Like texts and other desired elements on the image) is at the center.