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

Question

That simple.

Moving my layout into a fluid territory, working on scalable images. Using the img tag and setting max-width to 100% works perfectly, but i'd rather use a div with the image set as its background.

The issue I'm running into is that the image doesn't scale to the size of the div it's in the background of. Any way to add markup to the background code to set it to 100% width of it's container?

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}

Fox

Answer 1

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

Yourself

Ef 'em. I dont bother testing in IE7.. and I don't feel guilty about throwing 8 in the pile. Thanks for your help! – Fox

I hear you. Less than 10% of my visitors.. which arn't a lot }:) – Fox

Just an FYI- I did feel guilty, so I added in some Modernizr classes to readjust the image size if background-size isn't supported. – Fox

background-size actually isn't a way to set max-width or max-height. Not in the sense that img has max-width and max-height properties. – Ethanol

@nOjan: Nobody said it was. – Yourself

Info about fixed - developer.mozilla.org/docs/Web/CSS/background-attachment – Maiden

Answer 2

As thirtydot said, you can use the CSS3 background-size syntax:

For example:

-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;

However, as also stated by thirtydot, this does not work in IE6, 7 and 8.

See the following links for more information about background-size: http://www.w3.org/TR/css3-background/#the-background-size

Worcestershire

Answer 3

It looks like you're trying to scale the background image? There's a great article in the reference bellow where you can use css3 to achieve this.

And if I miss-read the question then I humbly accept the votes down. (Still good to know though)

Please consider the following code:

#some_div_or_body { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

This will work on all major browsers, of course it doesn't come easy on IE. There are some workarounds however such as using Microsoft's filters:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

There are some alternatives that can be used with a little bit peace of mind by using jQuery:

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jQuery:

 $(window).load(function() {    

var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();

function resizeBg() {

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }

}

theWindow.resize(resizeBg).trigger("resize");

});

I hope this helps!

Src: Perfect Full Page Background Image

Agriculturist

Thanks for posting your answer! Please note that you should post the useful points of an answer here, on this site, or your post risks being deleted See the FAQ where it mentions answers that are 'barely more than a link'. You may still include the link if you wish, but only as a 'reference'. The answer should stand on its own without needing the link. – Keloid

Hi Andrew, Good looking out! I revised my answer for compliance. – Agriculturist

Yours should be the accepted answer here. background-size: cover; was the ticket – Dannettedanni

Answer 4

Unfortunately there's no min (or max)-background-size in CSS you can only use background-size. However if you are seeking a responsive background image you can use Vmin and Vmaxunits for the background-size property to achieve something similar.

example:

#one {
    background:url('../img/blahblah.jpg') no-repeat;
    background-size:10vmin 100%;
}

that will set the height to 10% of the whichever smaller viewport you have whether vertical or horizontal, and will set the width to 100%.

Read more about css units here: https://www.w3schools.com/cssref/css_units.asp

Disturb

Doesn't width come before height in the background-size declaration? w3.org/TR/css3-background/#the-background-size – Prent

Answer 5

This is the solution you are looking for!

background-size: 100% auto;

Oysterman

Answer 6

Use :before Or :after with max-height

section {
  height: 100vh;
  width: 100%;
  background-color: #222;
}

section::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 50%;
  height: 100%;
  max-height: 100px;
  transform: translateX(-50%);
  opacity: 0.8;
  background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: contain;
}

<section></section>

Stewardess