Possible to Set a Max-Width for a Background Image? (Want to Scale Background-Image Down, But Not Scale Up)

How do I have a background-image only scale down to fit its element, but not scale up?

Is simply inserting an img inside the element you wanted to give a background to an option?

You can use max-width:100%; max-height:100%; on the image, so it will not exceed the container dimensions, but will still retain its aspect ratio and won't grow larger than its original size. Next, you could position the image absolutely and give it z-index:-1 so it'll be behind all the content and won't be affected by it. Finally, just give the image top:50%; left:50%; transform:translate(50%,50%); if you want it centered within its container.

Here's a demo: https://jsfiddle.net/ilpo/9dnqd6bc/1/

You could even set min-width and min-height, if you wanted to have a minimum size for the background.

max-width and max-height on background image

To prevent stretching of the image just change the value of the background-size property to contain:

.box {
  background-size: contain;
}

.box {  margin: 30px;  width: 400px;  height: 200px;  border: 1px solid;  text-align: center;  background: url(http://via.placeholder.com/300x200) no-repeat center;  background-size: contain;  position: relative;}
.box:hover {  background: url(http://via.placeholder.com/200x300) no-repeat center;}
.height p {  position: absolute;  left: -60px;  top: 45%;  -webkit-transform: rotate(-90deg);}
.width p {  position: absolute;  left: 40%;  top: -40px;  -webkit-transform: rotate(0);}

<div class="box">  <div class="height">    <p>height: 200px</p>  </div>  <div class="width">    <p>width: 400px</p>  </div></div>

Is there a way to use max-width and height for a background image?

You can do this with background-size:

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
}

There are a lot of values other than cover that you can set background-size to, see which one works for you: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Spec: https://www.w3.org/TR/css-backgrounds-3/#the-background-size

It works in all modern browsers: http://caniuse.com/#feat=background-img-opts

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

I would use a div as a wrapper with a max-width and set the background to that div.

HTML

<body>
 <div class="container">Content</div>
</body>

CSS

.container {
  width: 100%;
  max-width: 1920px; /* YOUR BG MAX SIZE */
  background:url("bg.png") no-repeat;
  background-size: 100%;
}

Background image not scaling on smaller screen size

If you want to display the full picture you should use contain instead of cover.

And if you want to keep cover for larger screens you can change the cover to contain only in your queries.

@media (max-width: 768px) { 
    -webkit-background-size: contain;
     -moz-background-size: contain;
     -o-background-size: contain;
     background-size: contain;

 }

CSS Image size, how to fill, but not stretch?

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />