Fitting background image properly to a widescreen

Question

Kind of weird title, but couldn't think of better way to word it. Basically I'm working on a website, and I want to use an asset I made in photoshop for a navbar that looks like a leather suitcase/belt background. Issue is, if I stretch it too far, it won't fit the screen. Basically if I use the CSS background-size: cover; background-repeat: no-repeat; property, it looks something like this

It fits nicely on the 100% width of the element, but as you can see, the image is clipped because it's not 100px as I want it to be.

If I used background-size: contain; background-repeat: repeat-x; properties my image would obviously fit nicely when it comes to height, but since it's not a seamless texture it doesn't clip properly horizontally. As seen on the image below:

Which looks pretty weird as you can see. Last but not least I tried using the 50% 50% trick - background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;, which kind of worked but i still have a problem with it not fitting vertically (the edges are being cut off), as you can see here:

So I'm asking if there's a way to fit the image properly with CSS that I'm missing. Alternatively the second image i posted with repeat-x, however if there would be a way to check (probably with javascript/jquery) that once the image doesn't fit (ala second image), it needs to be flipped horizontally with scaleX so the edges fit, or should I simply downscale the image in photoshop? Thanks for your advice.

Answer 1

Try using viewport to give the element width in accordance with the screen width (100vw = 100% browser width).

.nav-belt {
    width: 100vw;
    height: 100%;
}

Answer 2

Have you tried :

background-size: (100% 100%);