Responsive Header Image

@match858 Thanks for your feedback on the theme. I really appreciate it.

About the responsiveness of the header image. The header image is actually used as a parallax image so the height is like kind of constant in every devices. It is usually like that in parallax design. If you want to make the width change according to device width you could use the following css in Appearance->Customize->Custom CSS and click on ‘Save and Publish’ button. However, it will look like kind of compressed image in small devices, I personally don’t recommend this.
#parallax-bg { background-size: 100% 100%; }

About the repeat part it is actually quite easy, you can append one more line in above css.
#parallax-bg { background-size: 100% 100%; background-repeat: no-repeat; }

Hope this helps. If you have any further queries you can also put your query in our dedicated forum here https://themegrill.com/support-forum/.

Thanks for the info. Is there a way to keep the header image within the bounds of the content width?

You can try this css
#parallax-bg { background-size: 100% 100%; }
that I provided above. This will fit the header image to the content of the device viewed on. If you want to further decrease the size of the width.
You can try this css

#parallax-bg {
    background-repeat: no-repeat;
    background-size: 90% 100%;
}

You can change the 90% value according to your liking.

Hi and thanks again.

What I want to achieve is a fixed size image without repeat down to 1000px screens and then a 100% sized image on screens below 1000px. I have used the following css in my child theme stylesheet.

#parallax-bg {
background-size: 1000px;
background-repeat: no-repeat;
margin-top: 64px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}

@media screen and (max-width: 999px) {
#parallax-bg {
background-size: 100%;
}
}

This achieves the look I was after down to 1000px, but does not make the image responsive after 1000px.

Any help would be appreciated.

I tried your css and it works fine as you want it. I can see that upto 1000px the image appears to be same but below that it is being responsive as both width and height are decreasing when you decrease the browser size below 1000px. I added your css in the Custom CSS option of the customizer to check on it.

Oh yes, its strange that it doesn’t work from the child css but it does from the customiser.

1 last question if I may? When the image rescales on smaller screens the container remains the same size and leaves a large space beneath the image before the content. Is there a way this can respond too?

Actually, this css

#masthead {
    margin-bottom: 418px;
}

is responsible for the white space. The value 418px may be different as per the size of your header image. For this to be decreasing as the per the image size it would need javascript and that might be difficult. So, what you could do is, use media queries like above for different device width and control the margin-bottom for the masthead selector.

Thank you, great support.

I’ll look into the js resolution in the long run but for now I’ve used the media queries as suggested.

You are welcome. We would really appreciate it if you could add a review for our theme. ??

@themegrill Is there a way we can chat privately?

You can contact us via our contact us page here https://themegrill.com/contact/.

hi all,
nice theme, pls id like to have a image slider on the header image specifically meta slider, so id av multiple images on my header. pls any help?