@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.
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?
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.
Bobby van der Sluis
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.
kratsg
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.
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.
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.
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.
thauburger
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?
Copy & paste the code below to embed this comment.
PROMES
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?
48 Reader Comments
Back to the ArticleBobby van der Sluis
@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.
Bobby van der Sluis
@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.
jennyleighb
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?
boutell
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.
Klaus Hartl
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?
Bobby van der Sluis
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/
kratsg
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.
dannycheeseman
Thanks for your post, Very informative.
I too am not recieving lag..
Keep the posts coming ;-)
youngelpaso
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.
jQueryGuru
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!”
roginator
Oh my god, this is so, so cool! Thank you!
nomi49
It’s not working properly in IE8. The background stretches vertically but it won’t stretch horizontally across the window.
benihana
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.
GlobuleDesign
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
MarieS
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
Carmela Lee
With regards into resizing those pictures do we really that we have those upgraded resolutions?
Carmela Lee from Porte de garage enroulableÂ
thauburger
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!
PROMES
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?