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

Answer 1

You can use calc in background-size:

.bg {
    background-size: calc(max(100%, 1000px));
}

calc works also with background-position, for one side, or both sides