I think the problem lies in how fast the processor is because I only have the problem on older slower pc’s & mac’s.
The problem doesn’t change with check or un-check smooth scroll in the options tab or when using the smoothwheel FF add-on.
If everyone wants to dig in and solve the problem I will be happy to layout the specs on 1 slow xp laptop, 1 slow quicksilver 733 mac & 1 above average speed dell.
It very annoying and depending on the site I actually take the time to block the specif background image from loading.
Sorry to overtake the comments with the Firefox bug issue. To be clear, the article was well-written, informative, and the first place I’ll go when I need to achieve something like this. Thanks for the great article!
I’m not completely convinced that the Firefox slowness bug is related directly to hardware. I could be incorrect about this, but I don’t feel that my 1-year-old MacBook Pro (2.53 GHz, 4gb RAM) is really lacking so dramatically in the hardware department (of course, who really wants to admit that their hard-earned hardware is sub-par? ;).
I wonder if it’s possibly related to the operating system version as well. I’m on Leopard (10.5.8), not Snow Leopard (yet).
Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports…
I’m not seeing how this technique saves bandwidth for small screens. Scaling down with CSS does nothing to reduce the file size of the original background image.
You’ll need to prepare properly sized images beforehand and abuse media queries for this. Making the user potentially download multiple background images is a non-issue: What sane person resizes their browser often enough to make this a problem?
I know: That method isn’t ideal either because it gives us a lot more work. But dropping a 1280×960 image for mobile browsers isn’t particularly efficient either. It’s double the pixels shown on a retina display—not even counting browser chrome.
If only there were a way to cache and serve dynamically resized jpegs depending on device resolution & DPI.
I really like the look of super-sized backgrounds, but when you go from one page to the next or load dynamic content that makes the page longer or shorter, the background will also resize. This gives a jumping sensation to the background image.
The only way I can see this as being useful is if the height of your content never changes between pages or use a different background image for each page.
Actually positioning the background to top has nothing to do with this. The background doesn’t get applied to the size of the browser window, it is applied to a content container. If your content flows below the fold, the background will continue to be resized.
Copy & paste the code below to embed this comment.
Bobby 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.
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 Articledigideth
I have the super slow scroll like other users.
I think the problem lies in how fast the processor is because I only have the problem on older slower pc’s & mac’s.
The problem doesn’t change with check or un-check smooth scroll in the options tab or when using the smoothwheel FF add-on.
If everyone wants to dig in and solve the problem I will be happy to layout the specs on 1 slow xp laptop, 1 slow quicksilver 733 mac & 1 above average speed dell.
It very annoying and depending on the site I actually take the time to block the specif background image from loading.
Bobby van der Sluis
I’ve added an issue report in Mozilla’s bugzilla; Bug 577249 – -moz-background-size property affects page scrolling speed (for fixed backgrounds): https://bugzilla.mozilla.org/show_bug.cgi?id=577249
Jona
Sorry to overtake the comments with the Firefox bug issue. To be clear, the article was well-written, informative, and the first place I’ll go when I need to achieve something like this. Thanks for the great article!
I’m not completely convinced that the Firefox slowness bug is related directly to hardware. I could be incorrect about this, but I don’t feel that my 1-year-old MacBook Pro (2.53 GHz, 4gb RAM) is really lacking so dramatically in the hardware department (of course, who really wants to admit that their hard-earned hardware is sub-par? ;).
I wonder if it’s possibly related to the operating system version as well. I’m on Leopard (10.5.8), not Snow Leopard (yet).
Thanks for filing the bug report.
dreamtime214
All I want for Christmas is mandatory IE9 upgrades for the general population.
Peng
I’m not seeing how this technique saves bandwidth for small screens. Scaling down with CSS does nothing to reduce the file size of the original background image.
You’ll need to prepare properly sized images beforehand and abuse media queries for this. Making the user potentially download multiple background images is a non-issue: What sane person resizes their browser often enough to make this a problem?
I know: That method isn’t ideal either because it gives us a lot more work. But dropping a 1280×960 image for mobile browsers isn’t particularly efficient either. It’s double the pixels shown on a retina display—not even counting browser chrome.
If only there were a way to cache and serve dynamically resized jpegs depending on device resolution & DPI.
hermosawave
Weird background image sizing issues on the iPad. Bummer.
dottycom
Firefox 3.6.6 Mac 10.5.8 The pictures only rescale to a certain point, and the text box doesn’t scale at all.
hoffman_jeff
I really like the look of super-sized backgrounds, but when you go from one page to the next or load dynamic content that makes the page longer or shorter, the background will also resize. This gives a jumping sensation to the background image.
The only way I can see this as being useful is if the height of your content never changes between pages or use a different background image for each page.
codefisher
That would depend how you aligned your image. If the image was sent to align to the top of the page (not the center) it should not jump around.
Not upgrading your browser should be made a capital offense so we can start using this stuff :P
hoffman_jeff
Actually positioning the background to top has nothing to do with this. The background doesn’t get applied to the size of the browser window, it is applied to a content container. If your content flows below the fold, the background will continue to be resized.
Bobby 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?