In WordPress website development, Elementor's Slides (PowerPoint Presentation Tool)Very common. By default, Slides uses... CSS background-image + background-size: cover To display the background image.

This setup ensures the container is filled completely, but the downside is:

  • Images are often cropped, with important parts obscured;
  • The display quality varies greatly across different devices (PC/mobile phone);
  • It's almost impossible to achieve a width of 100% and a height that adapts proportionally.

Many website owners encounter the problem that front-end images are always incomplete, affecting aesthetics and user experience.

Solution

To achieve Width 100%, Height AutomaticActually, there are two directions:

  1. Replace the background image with the Image tool.(The most thorough approach, but requires adjusting the layout of the slide content).
  2. Keep the background image, but modify the CSS.(Lighter and directly overrides the default style).

This article introduces Method B: CSS Override SolutionIt retains the Slides component while fully displaying the background image.

Specific implementation steps

1. Open the Elementor page editor

Go to your website backend → Pages → Edit Pages → Open the Elementor page editor.

2. Locate the Slides widget.

Selecting the problematic one SlidesConfirm that the background image was uploaded through "Background Settings".

3. Add custom CSS

In Elementor, select the slide to enter. Edit Slides → Advanced Settings → Custom CSS(Professional version supported), paste the following code:

selector .swiper-slide {
    height: auto !important;
    min-height: unset !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

selector .swiper-slide-bg {
    position: relative !important;
    background-size: contain !important;  /* 改为完整展示 */
    background-repeat: no-repeat !important;
    background-position: center top !important;
    width: 100% !important;
    padding-top: 56.25%; /* 根据图片比例调整：16:9 = 56.25%，4:3 = 75%，3:2 = 66.6% */
}

Here padding-top Used to maintain container proportions: