Search code examples
csstwitter-bootstrapbackground-imagescalecentering

twitter-bootstrap: make a row (div) background image auto scale and center to fill 100%?

I've got a Bootstrap page where some rows have background images. Is there a way (preferably css) to scale such a background image, so that it's always centered and fills the div 100%?

So I don't mean a fullscreen background image for the entire page (like this), it just needs to fill the div (typically a row in my bootstrap container).

I mean like so:

different formats

So no matter the display resolution and the actual screen size of the div, its background image should scale accordingly so it entirely fills the div. The image should not be stretched out of proportions, which means that part of the image will typically fall outside the div, either up/down or left/right (unless the div just so happens to have the exact same aspect ratio as the image).

Also the image should be centered, i.e. the middle of the background image should be in the middle of the div.

I've tried all sorts of things with background-size:100% auto or auto 100% which seems to work OK in one direction, but I can't seem to find a generic solution that works in all cases.

Solution

  • sure, you could apply the same idea to any element:

    yourdiv  {
     background: url(images/bg.jpg) no-repeat center center fixed;
     /* and one of these: */
     background-size:contain;
     background-size:cover;
}