How Do You Make a Fully Responsive Hero Image Slider Without Fixed Heights

I’m using 3 images for my hero section. No text.

What I want:
When screen size decreases, the image should shrink.
The height should auto-adjust so the full image always shows.
This should work on all screen sizes, not just Desktop/Tablet/Mobile presets.

Problem:
In WordPress (Woodmart), I only see the option to pick 3 images for 3 breakpoints.
This isn’t truly responsive.
If I set background-size: contain, the image scales, but the slider height stays fixed.
There is no “auto height” or “contain height” setting.

Question:
How do you make a hero slider that:
Shows the full image without cropping
Scales proportionally
Automatically changes height on all screens
Without having to set fixed heights everywhere

Any simple solution for this?

One more issue: there’s extra space showing between the header and the hero section slider. I don’t see any padding or margin set in the hero section container. How can I remove this?

nobody there to reply?

Hello,

The “Cover” size for the bg image can cut some parts of the image. So this is not something caused by our theme, that CSS property works in such a way.

cover
Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.

Here you can check each bg image size – https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

If you want to show a full image without cropping, show the image via the Image element (not as a background), so remove the images that you defined for the background, edit the slider via page builder and define the image via the element. Then recheck the issue and let me know.

Kind Regards

Hi, Thank you for replying. please check the video attached to this reply and guide me through this! very much appreciate the help

Sorry for the misunderstanding. Our theme slider is created to be used similar to the Revolution Slider where background image (color, gradient, photo, image pattern) and slider content (text and buttons) are separate layers where slide background is set via Slider background options (https://prnt.sc/0jcMZRd2hqim) and slide content text and buttons is created via Elementor builder text and buttons elements (https://prnt.sc/GKzAkydodQae). As an example, you can check the following demo page (https://woodmart.xtemos.com/demo-retail/demo/retail/).

If you use pre-created images in a graphic editor that already contain text and buttons, then they cannot be used as a background for slides, because at certain resolutions the aspect ratio of the screen may not match the ratio of the size of the slider and the screen of the device and the text on the image can be cut. The following issue cannot be fixed because it is the default behavior of the CSS background property.

For such images, we do not recommend using the Revolution Slider or Woodmart Slider, but use a simple image carousel (https://woodmart.xtemos.com/images-gallery/) or banner carousel (https://woodmart.xtemos.com/banners/) elements.

Kind Regards

[Author]

Posts