[FIXED] How to scale a background image to fit the full width of the screen while maintaining aspect ratio? Height is cut off when I use "cover"

Issue

OBJECTIVE

This is my website https://saddhustore.com.br/moda/. I want the main image at the top to scale down to fit 1366x768 screens just as it does in my 1920x1080, displaying all of it, without distorting the aspect ratio at all.

WHAT I TRIED

I am using Elementor in WordPress. In the "Custom CSS" part I have tried to add the following code:

selector {
    background-size: cover; OR background-size: contain; OR background-size: 100% auto;
}

When using cover, I have tried adding background-attachment: fixed and height: 100% to no avail.

RESULTS AFTER APPLYING MAGGI'S SUGGESTION

Notice the bottommost part gets cut off

For some reason it looks perfect within Elementor

Solution

add following code in css (note: set height of selector to manual like this):

selector {
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center;
    height: 50vh   /*manual add*/;
    width:100vw;
}

Answered By - MAGGIx1404