CSS: Scale background image down if larger than window, keep at 100% otherwise

Question

I\'d like to deploy a background image in the body of my website that scales down with the window resolution, but does not scale up beyond it\'s original size (1920x1080). T

Answer 1

You can try like this. Any size image resolution will work like responsive:

img#mybg {
    position: fixed; //image will always be top: 0 left: 0 by default.
    display: block; //make it a block for width to work.
    width: 100%; //set default width
    height: 100%; //set default height
    max-width: 1920px; //set max width
    max-height: 1080px; //set max height
    z-index: -999999; //set z-index so it won't overlap any other element.
    background-size:100% 100%;
}