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

Question

I'd like to deploy a background image in the body of my website that scales down with the window resolution, but does not scale up beyond it's original size (1920x1080). That way, users with smaller resolutions can still see the entire image, but those beyond do not have an ugly upscaled background.

It doesn't look like background images support properties like max-width, which I would usually use for a purpose like that.

What could the solution be? Is this possible in CSS without extra scripting?

you would more then likely need some jquery/javascript – Liam Sorsby Oct 30 '13 at 12:44 — Liam Sorsby, Oct 30 '13 at 12:44

score 11 · Accepted Answer · answered Oct 30 '13 at 13:29

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%;
}

score 4 · Answer 2 · answered Oct 30 '13 at 13:36

4

Just a really small/quick suggestion:

Depending on how it looks, and all flows together, background-size:contain; might be an option.

or, on your body, set the max width to 1920, set the margins to auto, and that might also work for you.

answered Oct 30 '13 at 13:36

ndugger

7,373
5
31
42

score 3 · Answer 3 · edited Nov 04 '13 at 16:22

You can try like this. Any size image resolution will work like responsive:

img#mybg {
    position: fixed; //image will always be top: 0 left: 0 by default.
    display: block; //make it a block for width to work.
    width: 100%; //set default width
    height: 100%; //set default height
    max-width: 1920px; //set max width
    max-height: 1080px; //set max height
    z-index: -999999; //set z-index so it won't overlap any other element.
    background-size:100% 100%;
}

score 2 · Answer 4 · answered Oct 30 '13 at 12:47

You could try creating an html <img> tag with a specific id

e.g.

HTML

<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />

CSS

img#mybg {
    position: fixed; //image will always be top: 0 left: 0 by default.
    display: block; //make it a block for width to work.
    width: 100%; //set default width
    height: 100%; //set default height
    max-width: 1920px; //set max width
    max-height: 1080px; //set max height
    z-index: -999999; //set z-index so it won't overlap any other element.
}

For dynamic centering you would have to use Javascript in combination with a window.onresize event.

If you need more information I will edit my post accordingly.

A good alternative which is very easy to use(but does stretch your background) would be to use jquery backstretch plugin. It allows you to simply add a fullscreen background image, which will scale with resolution (which is not exactly what you want, but the best alternative I could think of).

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

4 Answers4

Linked