I have seen that this theme is responsive, and is following material design principles, but there are issue with the header image. I want the full header image to appear on the frontend, if i apply “contain” css property to header-filter, i am able to achieve that, but it leaves me with white bar on top and bottom of header.

If i use header as it is, the image gets cropped, and if i use the css property the image is displayed but bringing white bars around. This is a serious problem on mobile phones, as on some screens not even 30% of the total image gets visible.

Is there any way to display the full image without causing white bars above and below.

My site is and at present i am NOT using that property, because it gives bad impression. In hope of help. Thanks in advance.

https://milyin.comenter image description here

put on hold as off-topic by Krzysiek Dróżdż, Jacob Peattie, Howdy_McGee yesterday

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • can you please add screenshot about which whitespace you are talking. – Pullata Praveen Feb 12 at 7:17
  • Ya sure, give me 2 mins, i will add the screenshot in question itself – Aditya Agarwal Feb 12 at 7:27
  • Added thebimage into question. You can see white space between header and image. This happens when i use css to make image beung contained. If i don't apply contain then image gets cropped – Aditya Agarwal Feb 12 at 7:39