How to set a minimum width with background-size

Question

I have an image that is 1000px X 600px . I want to use it as a responsive background for a div but would like to set a minimum width of 1000px despite how small the browser window is.

This is frustrating because there doesn't seem to be a simple way to define a min. width.

If I use background-size: cover - for some reason, the image is defaulted much larger than 1000px.

please help

Answer 1

There's now an option for background-size to only scale the image until the picture has met it actual height/width. This way, you don't have to set a min-width or anything.

In your CSS:

body {
  background-size: cover;
}

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values