How to set big title background image to responsive?

Hey there,

The image in Hestia is designed to cover the whole screen. Thus, on some devices, the whole image might not be available.

There is a custom code avaiable though. Add the following code in Appearance > Customize > Additional CSS:

@media (max-width: 480px) {
.header-filter {
background-size: contain;
background-repeat: no-repeat;
}
}

This way, each part of the image will be visible, but the dimensions will be different, depending on the image you are using and the device you are testing on.

Below is the screenshot of the image, after i insert the code.
https://drive.google.com/file/d/1aus0eHpIdBBBYgFcKIcH9fPbtXuxT-pP/view?usp=sharing

How can i make the image bigger to fit the screen in smartphone?

Especially the height of the image is too short.

Hey there,

It is either way. Either the vertically long image is possible which will be cropped but display there in full height. or Horizontal image with custom code, but some space in top and bottom side.

A horizontal image cannot be displayed vertically on mobile without being cropped or having extra space. As the image is landscape in desktop, right now there is not a way to display it without cropping in mobile devices.

I am having the same problem. Question: @vishakha Is there a way to display one image for a certain width and a different one for mobile?

If the theme is responsive, this must come out of the box and images need to be served depending on the screen resolution.

True. A huge problem. Or even if they can do that the header image should be displayed in 16:9 aspect ratio across all screens. Most of the images are of 16:9 ratio.

At present the theme, in order to make content responsive, causes the image to become spoiled. If they can’t make the image happen perfectly enough, then atleast 16:9 should be there. It would be a great help

Hi There, has anyone found a solution to this yet.

@media (max-width: 480px) {
.header-filter {
background-size: contain;
background-repeat: no-repeat;
}
}

This will change the image height for mobile, but the “container” height doesn’t change so the image has grey background which extends above and below the image. Have a look at https://www.juiceclub.co.za to see what I mean

Hello @dmweyer, I have tested your website juiceclub.co.za and it appears to display the top image correctly on both my pc and my mobile devices. What did you do to get it to work? Can you share the code? Thank you.

• This reply was modified 5 years, 3 months ago by rjnichols808.

Hi anyone able to figure this out? @vishakha @teddybear1980

I’m having similar problem with the hero image repeating on my homepage header on larger screens 1920 x 1080. Using Skovers theme FYI:

https://www.strandconsulting.io

*Disclaimer* I typically use WPBakery Page Builder as I’m note code-savvy, so any advice using that would help! ??