Supersize that Background, Please!

by Bobby van der Sluis

48 Reader Comments

Back to the Article
  1. @hoffman_jeff: Your assumptions are incorrect. In the examples the background does get applied to the size of the browser window; the length of the content will not influence this. At least, it only influences it whether or not a scrollbar gets applied. However this type of jumping will also occur with regular backgrounds, supersized or not.

    Copy & paste the code below to embed this comment.
  2. @dottycom: Can you please elaborate on which examples and until what approx. resolution you scaled up to? The text box is not meant to scale.

    Copy & paste the code below to embed this comment.
  3. Great article. Now here’s my question.  Can the same principles applied here for making a background image automatically resize be applied to an image map?

    Take my website for example. (http://jennyleighb.com)

    It is basically one main image mapped with links, but because of different browser sizes, I have it set to recognize the visitor’s resolution and direct them to one of 4 differently sized versions of the site.  So I basically have 4 versions of my site in different resolutions, but it would be ideal to have one version that automatically resizes (including moving the mapped links).

    Do you think something like this is possible? Maybe using this same technique?

    Copy & paste the code below to embed this comment.
  4. This is a great article and it fills me with hope for how much more fun it’ll be to accomplish this in the future. In the meantime, though, “this older article of mine”:http://www.boutell.com/newfaq/creating/backgroundfill.html is still a useful solution for doing it when you must support older browsers, including IE 6, 7 and 8. The code provides an optional flag to preserve the aspect ratio if you don’t want to distort the image.

    Copy & paste the code below to embed this comment.
  5. The “only all and” in the media query seems superfluous. Why not

    @media (max-width: 1024px) and (max-height: 768px) { … }

    Is it needed for cross-browser compatibility?

    Copy & paste the code below to embed this comment.
  6. Good comment. All is the default value for media type, so why not omit it? And why use the only keyword?

    You’re right, for the example (as is) you could use the shorter version as well (although I haven’t tested this). The main reason for this is that the background-size property will be ignored by browsers that haven’t implemented them. However if you would add other (more common CSS2.1) styles to the media query you may get into cross-browser issues. So in almost all my work I am used to use the ‘longer version’, to avoid potential issues.

    The following articles have documented these cross-browser issues:
    http://dev.opera.com/articles/view/how-to-serve-the-right-content-to-mobile/
    http://dev.opera.com/articles/view/safe-media-queries/

    Copy & paste the code below to embed this comment.
  7. You could create a nice resizeable gradient using this + some sort of background-repeat property. The only issue I’ve gotten with any browser is lagging (FireFox).

    Another way to restrict the resizing of the background image is to actually restrict the resizing of the containing box. IE: using max-*, , and min- (where * = width/height) would definitely do the trick. For example:
    <br /> max-width: 1000px;<br /> width: 90%;<br /> min-width: 400px;<br />
    Would allow the user to resize their browser and watch the box resize unless it becomes too big or too small. The background-size can be set to ‘cover’ and it looks great.

    Copy & paste the code below to embed this comment.
  8. Thanks for your post, Very informative.

    I too am not recieving lag..

    Keep the posts coming ;-)

    Copy & paste the code below to embed this comment.
  9. Hi, just thought I’d chime in on this one as regards Peng’s comments.  You’re right about the resizing not solving the bandwidth issue – which for me is probably more important than any other concerns.  If you use a really high quality bg, then you’re going to pay in terms of bandwidth and even on fast connections you might see some ugliness.  One way I got around this on a project was to use some JS to change backgrounds, using a fast & slightly crappier version of the bg image as the default and once that was downloaded initiate a download of a larger version, which once completed had a callback which updated the CSS dynamically.  Obviously this isn’t ideal, but its pretty easy, doesn’t use many lines of code, and can be combined with the article’s technique to pull off some pretty powerfull stuff.

    Also, just a note on performance of CSS3 rendering.  I’ve noticed that this seems to break down by rendering engine.  WebKit tends to kick-ass, Gecko etc not so much.  For instance, start going nuts with the shadow properties on a large enough (i.e. say 600 × 600+) object and you’ll see a serious slowdown on all browsers, but particularly FF & its ilk.  This and other issues don’t seem to be fully related to hardware either, since the WebKit browser on the iPhone (and I’m talking 3g here) does a great job of implimenting CSS3 animations and transitions that have choked desktop browsers (again, mostly FF) on my admitedly not very quick MacBook.  Fact is that some of the cooler CSS3 effects are not yet ready for primetime and the browsers certainly haven’t been optimized for some of them yet.  But once they are… Booyah!

    On another note, since we’re talking fairly cutting edge here, why not begin to explore SVG?  Obviously if you have some backgrounds that are mre amenable to raster graphics (and most are probably) this wont work great.  But, with some top notch SVG JS libraries out (and coming out) namely, Google’s, and notably Raphael JS we can get some pretty sweet cross browser SVG action on the CURRENT gen browsers, not to mention the possibilities of IE 9 (which will finally natively handle SVG).  Having used SVG for some projects that would otherwise have required Flash or other esoteric techniques (in these comments, someone mentioned using an image- map!?) I have seen the promised land.  For full-screen HD+ and mobile, SVG could be amazing.  I’m crossing my fingers on IE 9, and with the leaps and bounds IE 7 & 8 made, I think MS is finally on the right track.

    Copy & paste the code below to embed this comment.
  10. Once again, alistapart showed os how to write a usefull and interesting article!

    Hot: The many usefull examples in this article, mixed up with the explanations – It’s a hell of a good cocktail!

    Not: Does not work in IE! Please, focus a bit more on ways to fix problems like that!

    “Bobby, thanks for writing this great article! Hope the feedback was helpful!”

    Copy & paste the code below to embed this comment.
  11. Oh my god, this is so, so cool! Thank you!

    Copy & paste the code below to embed this comment.
  12. It’s not working properly in IE8. The background stretches vertically but it won’t stretch horizontally across the window.

    Copy & paste the code below to embed this comment.
  13. I’ve actually been using the “img” element for a while, and it’s a great workaround. You don’t need scripting at all for resizing, so I’m curious what “img” method you’re referring to. Mine usually looks something like this, with the “bg” div coming before your “wrapper” div:
    <div id=“bgScaleContainer”>
      img.jpg
    </div>

    Then, my CSS is simply:
    img.bgScale
    {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index:1000;
    }

    The image only scales according to the browser width, so it’s always the proper ratio. As said above, no tables or scripting necessary, and no scrolling issues at all.

    An example: http://benpaddockdesign.com/

    Now, I know on my site the image is a huge file and rather tall, so it has extra scrolling, but that’s a conscious decision. It doesn’t have to be that way if you don’t want it to be.

    I know this is a late post, but I hope it helps.

    Copy & paste the code below to embed this comment.
  14. For now im using a jquery plugin that dynamically resizes the image for different screen sizes. works pretty well across all browsers.

    you can find it at ajaxbender

    Copy & paste the code below to embed this comment.
  15. You know, I have had a fair bit of experience with html and css, but still find it difficult to get the page background and other page elements all working together.
    “Martingale Collar”:http://martingale-collar.com

    Copy & paste the code below to embed this comment.
  16. With regards into resizing those pictures do we really that we have those upgraded resolutions?

    Carmela Lee from Porte de garage enroulable 

    Copy & paste the code below to embed this comment.
  17. Is there a reason to apply background-size to the body tag as opposed to the html tag? By my understanding, the html tag is always at least the size of the browser window, whereas the body tag can be smaller than the browser window, depending on explicit sizing / size of internal elements.

    If this is the case, is there a reason that we wouldn’t apply the style to the html tag, to ensure full-bleed?

    Thanks!

    Copy & paste the code below to embed this comment.
  18. I enjoied the article very much. It offers a great, futureproof, solution for the background. Often I like to have a fixed background for the container only. Is this also possible and if yes, how can I do this?

    Copy & paste the code below to embed this comment.