Best way to make responsive hero image?

Hi, for my previous project with Woodmart I was using Woodmart slider as a hero element on home page. It has an option to use separate background image and slide height for desktop and mobile.
Now for new project I want to use just an image as hero element.
But I’m having difficulties with scaling it properly on mobile, e.g. it is scaled up too much.
I am using simple row with text element and hero image set as background.
Can you please advice what is the best solution?
Maybe I should use another approach?
Is it possible to serve separate image for mobile?

Hello,

The WoodMart slider has the option to set different image sizes for different devices. You would better to upload square and equal proportion images to get a good result: https://xtemos.com/docs/woodmart/woodmart-slider/add-slides-slider/

If you have any questions please feel free to contact us.

Best Regards

The question is not about slider. I mentioned it only to describe what I want to achieve.
I need my hero image (without slider) to be fully responsive, but unfortunately it’s is cropped in ugly way on mobile.

That’s what I was looking for – https://xtemos.com/forums/topic/different-size-background-images-for-different-screen-resolutions/

I applied similar code and it nearly worked, but there’s a catch – the CSS does not work when applied to the section containing background, it works for row inside the section but not for the section.

Hello,

The background images are not cut, they work in a different way. They usually have the size that the row of columns has.

Best Regards

[Author]

Posts