How to prevent scaling of background image using CSS?

Question

I have a high-resolution image that is the background image of a div. The div keeps rendering it at a smaller size but I would like to leave it unscaled. I don't mind that the background image is cropped to show only a portion of the image as long as that portion has the original size.

Javascript:

console.log(img.width) // this comes out 3840px
resultDiv.style.backgroundImage = "url('" + img.src + "')"; 
resultDiv.style.backgroundRepeat = "no-repeat";

CSS:

.img-full {//this is the class of the img

    max-width: none;
    max-height: none;
}

#bottomPanel {//this is the resultDiv that is scaling the background image

    height: 30vh;
    background: black;
    margin-left: 10px;
    margin-right: 10px;
    overflow-x: auto;
    overflow-y: auto;
}

Answer 1

you can specify the following CSS Property

background-size: cover;

this will make sure the background covers the whole element regardless if it was cropped or not, different that

background-size: contain;

that will scale the image to be fit within the element and to be fully visible

Answer 2

If you would like to prevent scaling by using background-size: cover . This crops the background, and it never stretches for me.

More info about background-size : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size