Responsive Header Image settings

[jcmiyake]

My header image is set as a background image scaled to 100% width and min height of 400 px.
I’d like it to change to a min height of 200px on mobile or smaller screens.
How do I go about doing so?

[ruenel]

Hello Jessica,

Thanks for writing in! Regretfully we weren’t able to check your site because the credential do not work for us. It seems that the username or password is invalid. Please double check it.

Meanwhile, I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works. Please also keep in mind that the height of the background image depends on the height of the section which is also dependent to the total height of the contents inside the column.

Hope this helps.

[jcmiyake]

Thank you for your response. The link you shared with me doesn’t address my question directly.
Let me try to clarify my inquiry:
The page I’m working on has a header that is 1400x400. On a desktop or tablet browser, the image is rendered as desired.
Where I’m having problems is when the browser dimensions get smaller (i.e. a smaller mini tablet or on a mobile device) only the center of the image can be seen (since it’s set to min-height of 400px.
Ideally, I’d like a responsive header image that either replaces the header image with a dimensionally smaller file to better fit the mobile browsers OR an ability to change the height/width of the header image based on max browser dimensions.
I hope that’s a bit more clear. Additionally, I’ve fixed the login credentials, please see the new secure note. Thanks.

[friech]

Hi Jessica,

Are you referring to this image?

Instead of adding the image as the section’s background, please add the Image as an Image element. Because background-images is responsive in a different way, that what Ruenel trying to show on the link above.

To do this, first, remove the spacing of the section where you will place the image, this will ensure that there is no container that will prevent your image to be fullwidth.

• 

Then use the Image element for adding the image, set the width to 100%

• 

Then add this to the Image element’s Element CSS area

$el.x-image img {
	width: 100%;
}

That should make the image respond to its container width.

Hope it helps,
Cheers!

[jcmiyake]

Thank you, this worked perfectly!

[jade]

You’re welcome, Jessica.