Make background image in color section full width (stretch to fit)

On my homepage https://wta.nl/ I have a full width slider, made with Advanced Layerslider. It looks great, but the Kb size of it hurts my pagespeed score. Because it’s a very simple slider I want to replace the slider by a color section with a background image that looks almost the samen and stretches full width. But despite reading every topic on it on this forum, I can’t get it to work. The background image I want to use is the same as the one in my current slider. But when I apply it as a background in the color section it doesn’t stretch to fit full width. The image is 1783 x 534 px.

What I’ve tried:

– Gave the color section a Custom ID Attribute, like it says in your Enfold Documentation: https://kriesi.at/documentation/enfold/color-section/#color-section-with-100-content-width and pasted the code in Quick CSS. When applying a background color the color section is full width. But applying my background image doesn’t stretch full width.

/* Color section container width */
#section-container-width .container {
  width: 100% !important;
  min-width: 100%;
  padding: 0;
  margin: 0;
}

– After that I tried to apply my background image as an image, and used the following code found in this topic: https://kriesi.at/support/topic/full-width-images-on-a-page/#post-711522. That didn’t work either.

.avia-image-container avia-image-container-inner, .avia-image-container avia-image-container-inner img {
    width: 100%;
}

– I finally found this recent topic https://kriesi.at/support/topic/full-screen-image-with-text-overlay/#post-1466589https://kriesi.at/support/topic/full-screen-image-with-text-overlay/#post-1466589 where moderator @Ismael says: try setting the Styling > Background Image > Background Repeat option to the fifth option (Stretch to Fit). But I don’t see that option in my Enfold Layout Builder. I even saw more posts on this forum where users got this Background Repeat advice. Why can’t I see this option?

So I’m pretty confused right now. It seems so simple to recreate my current slider with a static background image and placing a few buttons in it. But I really don’t know how to do it. Please help.

By the way: I’ve deleted all my previous attempts with the color section and Quick CSS, so my current page is again with only the current slider.

• This topic was modified 2 months ago by paulw185.
• This topic was modified 2 months ago by paulw185.
• This topic was modified 2 months ago by paulw185.