Does CSS3 Offer a "Minimum-Size" Property for "Background"

Does CSS3 offer a minimum-size property for background?

I think you are looking for

background-size: contain;

OR

background-size: cover;

The difference being that cover specifies that the background image should be as small as possible while maintaining its aspect ratio. contain on the other hand specifies that the background image should be as large as possible.

See the MDN documentation here.

Is there a way to set a minimum background size in css/html

use background-size:50% 50% or something like that instead of cover - this will size your background to be smaller

If you don't want it to be seen on smaller devices then add a media query that says background:#fff repeat or something along those lines like this:

@media screen and (max width:480px){background:#fff repeat;}

CSS background-size property

What the other answers are proposing only works if your body element is as big as the window.

If the body size is not the full window size, you could try using JavaScript (I'm using the jQuery framework):

<script>
$(document).ready(function() {
    // Call the function at the beginning, in case the window is already too small, 
    onResize();

    $(window).resize(function() {
        onResize();
    });

    function onResize() {
        // Note: 16 / 9 is the resolution of the background image
        // Change appropriately
        if ($(window).width() / $(window).height() < 16 / 9) {
            $(".bg").css("background-size", "auto " + $(window).height() + "px");
        }
        else {
            $(".bg").css("background-size", "cover");
        }
    }
});
</script>

See this JFiddle

Hope this helps!

CSS3 background-size: contain;

On block elements (like div), height does not work the same way as width. If you don't specify a height, the element will be as high as its content. That's one thing.

height: 100% would be the way to go if you want your div to be as big as body is, but the trick is that a percentaged height always comes from the parent's height. So you have to set height: 100% on all the parents (including html) for crosss-browser results.

html,body,#please_expand { height: 100%; }

jsFiddle Demo

Set size on background image with CSS?

CSS2

If you need to make the image bigger, you must edit the image itself in an image editor.

If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want)...

CSS3 _{^{unleash the powers}}

This is possible to do in CSS3 with background-size.

All modern browsers support this, so unless you need to support old browsers, this is the way to do it.

_{Supported browsers:}


^{Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+.}

.stretch{
/* Will stretch to specified width/height */
  background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
  background-size: 100% 100%;
}

.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;
}
.resize-fill-and-clip{ 
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */ 
  background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */ 
  background-size: contain;
}

In particular, I like the cover and contain values that gives us new power of control that we didn't have before.

Round

You can also use background-size: round that have a meaning in combination with repeat:

.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */ 
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;
}

This will adjust the image width so it fits a whole number of times in the background positioning area.

---

Additional note

If the size you need is static pixel size, it is still smart to physically resize the actual image. This is both to improve quality of the resize (given that your image software does a better job than the browsers), and to save bandwidth if the original image is larger than what to display.

Background Image Scaling While Maintaining Aspect Ratio

You can't, at least not like you are trying to now.

What you can do, however, is create an <img> instead, and with css set position:absolute, scale it to 100% width and crop it from the parent with overflow:hidden

example: http://jsfiddle.net/GHmz7/4/

---

Related Topics