background-size contain, but don't scale up

background, css, html

Solution

Unfortunately, what you want to do isn't possible in CSS.

Your best bet is to set the background-size using Javascript. However, if you want the image to scale down if the container is smaller than it, you will have to be able to retrieve the image's natural height.

if ($('.el').height() < imageHeight) {
  $('.el').css('background-size', 'contain');
}
else {
  $('.el').css('background-size', 'auto');
}

Problem

I set my background image to `contain`: ``` .el { background: url(path/to/img.jpg) no-repeat center center; background-size: contain; } ``` But that scales the image up. I want the image to never be bigger than its native dimensions, and only scale down when it won't fit at its native resolution. Here's a demo: http://jsfiddle.net/6W3yh/ I'm looking for a solution in CSS only. No JavaScript please.

Original source