Perfect Full Page Background Image
We visited this concept of re-sizeable background images before… but reader Doug Shults sent me in a link that uses a really awesome technique that I think is better than any of the previous techniques.
This technique and the above background image is credited to this site. Here is what this technique is going to accomplish:
- Fills entire page with image, no white space
- Scales image as needed
- Retains image proportions
- Image is centered on page
- Does not cause scrollbars
- Cross-browser compatible
- Isn’t some fancy shenanigans like Flash
This is a very tall order, and we are going to be pulling out all kinds of different stuff to make it happen. First of all, because the image needs to scale, a traditional CSS background-image is already disqualified. That leaves us with an inline image.
Technique #1
This inline image is going to be placed on the page inside of a bunch of wrappers, each necessary for accomplishing all our goals.
<div id="bg">
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/bg.jpg" alt=""/>
</td>
</tr>
</table>
</div>
</div>And the CSS:
* {
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}
#bg {
position: fixed;
}
#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}
#bg td {
text-align:center;
vertical-align:middle;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}That’s quite a little load of markup and CSS, but it does the trick very well! Just doing this alone gets the job done, but what about if we want actual content on the page. Setting that overflow to hidden on the html and body elements should scare you a little bit, as that will totally cut off any content that is below the fold on a site with no scrollbars. In order to bring back scrollable content, we’ll introduce another wrapper. This one will sit on top of the background, be the full width and height of the browser window, and set the overflow back to auto (scrollbars). Then inside of this wrapper we can put content safely.
<div id="cont">
<div class="box">
<!-- content in here -->
</div>
</div>#cont {
position:absolute;
top:0;left:0;
z-index:70;
overflow:auto;
}
.box {
margin: 0 auto;
width: 400px;
padding: 50px;
background: white;
padding-bottom:100px;
font: 14px/2.2 Georgia, Serif;
}JavaScript Fixes
For IE 6, there is some MooTools stuff going on to fix it up
In Firefox, default “focus” is placed on the body element when the page loads. That means that pressing the space bar will scroll down the body, which would reveal some ugly white space. We can use some jQuery for a quick fix, to remove that focus and place it on a hidden element instead, removing that problem:
$(function(){
$(".box").prepend('<input type="text" id="focus-stealer" type="hidden" />');
$("#focus-stealer").focus();
});The addition of fixed positioning on the #bg wrapper eliminated the space bar/scrolldown problem. CSS FTW!
Current Bugs
- In Safari 4 & Chrome, the min-height isn’t catching and doesn’t resize vertically to fit.
Technique #2
Big thanks, as usual, to Doug Neiner for this alternate version.
Here, we can use CSS with no JavaScript fixes, and the image is just an inline image with a class name of “bg” and no extra markup. That’s a big win for all the folks unhappy about the extra markup.
The only caveat is that it doesn’t quite meet all the requirements layed out about, in that it doesn’t center in IE 7, doesn’t work at all in IE 6, and may not always be proportionate depending on the original image size. BUT, since it’s simpler and bug-free, it’s defenitly a solid option. Here is the CSS:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
div#content {
/* This is the only important rule */
/* We need our content to show up on top of the background */
position: relative;
/* These have no effect on the functionality */
width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
}
body {
/* These rules have no effect on the functionality */
/* They are for styling only */
margin: 0;
padding: 20px 0 0 0;
}
When the background-image gets upscaled it seems like it’s pretty heavy for Firefox (maybe other browsers too) and if you scroll through the site there is an obvious delay there.
Nice effect though, thanks!
Nice follow up to the previous article. I personally wouldn’t have thought of using a table – the bogeyman of web design!
Works nicely though.
This is awesome! very clear in w200% and h200% then -50% positioning!
Table is perfect fine because its only holding a image. The content you concern about with accessibility is on the DIV.
Fine!? A table is fine if you like to poop all over semantics and proper use of HTML elements.
This solution is ugly as sin, a javascript workaround would be far more elegant (if done properly).
did he say “poop”? :D must have kids. haha
It never ceases to amaze me how much hate tables have generated within the design community :)
@ Josh #2
Blatant incorrect use of tables have generated a lot of hate and rightly so.
Oh, I think that’s almost the definition of hate, isn’t it? It makes you sort of irrational.
The problem with tables was lots and lots of them everywhere, for no reason.
This, OTOH, is a beautiful solution with a tiny little table. Oh, who cares?! :-)
I agree that it’s fine – it’s not as though in a real world situation you would be entering the site for awards.
Sure, divs are purposely designed for layout. But in a business sense (which is how we all put food on the table), sometimes the quicker way is using a table here and there.
Unless otherwise specified, I sincerely doubt that a client or employer would care – I haven’t come across one.
This is a fantastic solution + especially that it is cross browser compatible which is far more important.
tables … geeze …. those who moan about how bad it is generally have less than perfect websites themselves … lol …. nothing at all wrong with tables if used correctly and this is a prime example of very good use.
WELL DONE and thanks
thought about how to do this yesterday, and then you post this today. This is really great!
Thanks
nice tips. btw, how trick if the image in code css?
Just a little nitpick,
Fills entire page with image, no white space
On the Demo, when the window is less then 1125px wide there IS white space on top and bottom.
I think this space is more likely to appear on a user’s screen then when there is white when the window is bigger then 2560px (with a big image and overflow:hidden) – the latter is not the case in this demo, but is here
In Chrome 2.0.172.39 i see background at top and bottom of page (on Your example and on http://ringvemedia.com/), and in Opera 9.64 i see scrollbars on Your example. On http://ringvemedia.com/ scrollbard doesn’t show.
The latest Opera looks fine to me, but indeed there is a bug in Chrome (mac). I’m gonna hold off on sweating that until there is a final mac version I can test on.
http://img29.imageshack.us/gal.php?g=chromeq.jpg these are screenshots taken from my home desktop, but problems are the same @ work, there i’m on XP, here on Win 7.
Opera screenshot is from 10beta, but i’ve got the same problem on 9.64.
That was taken in the few minutes while I was working on a new idea to fix the focus/scrolling problem…
But Opera is still kinda borked.
Man, the Opera users really come out of the woodwork when you post a technique like this.
Thanks for taking a look and breaking this down. I found an earlier method listed on this site, too, http://css-tricks.com/how-to-resizeable-background-image/ but I ended up using the method Anders uses on http://www.cssplay.co.uk/layouts/background.html.
Seems there are always several ways to accomplish the same thing….still not sure how tables works in this case but fun to take a look nonetheless.
Thanks!
Doug
The CSSPlay method looks to resize the image though, which can be undesirable.
Anders method doesn’t preserve the aspect ratio does it?
I agree with Chris that the distorted aspect ratio is quite undesirable.
It’d be great if we could do this without the use of a “layout-table”, BUT this is a fantastic effect and perfect for photo blogs, portfolios, etc.
Thanks for sharing!
Nice effect Chris, I’ll definately get some use out of this one. Good job.
This technique (at least the demo and the ringvemedia site) don’t work very well in Safari 4.0.2
The horizontal scaling sort of works but the vertical stuff doesn’t.
Screenshot
It seems to be the min-height attribute on the image that isn’t taking in Safari 4. Not sure what the solution is going to be there. JavaScript might need to get involved, unfortunately.
Nice proof of concept, I like these types of posts. Thanks.
Another way to do this trick that i use, is to use jquery tlike this
$(function() {
h = $(window).height();
w = $(window).width();
$(body).style(‘background’,'url(phpthumb.php?src=bg.jpg&w=’+w+’&h=’+h);
});
to explain this, with jquery i’m getting the height and width of the window then using php gd i’m resizing my background to the good size
just a little glitch it’s:
$(body).style(‘background’,'url(phpthumb.php?src=bg.jpg&w=’+w+’&h=’+h+’)');
Pretty clever =)
Would you mind explaining this a little more? Is this function inside the document ready function? A little more insight in terms of implementation would help me understand.
Thanks
From what I can see, this either:
a) doesn’t resize with the window
or b) re-requests the image whenever you change the window size.
More importantly, this technique prevents the browser caching the background image – which, for big images like these – is critical.
Very cool trick. Can’t CSS3 implement this also? I know it’s not friendly w/ IE yet. Just curious.
I have seen this before too. Was inspired by it originally..
Hmmm, on FF3.5, if I press “space” the whole page scrolls…
I fixed the space bar issue by appending a hidden input with javascript and setting the focus to that. Kinda hacky but fixes the bug for now.
Alright I documented the current known bugs at the bottom of the article. If you find fixes or more bugs, let me know.
The page scroll can actually be done with the space bar, but also with the arrow keys, for horizontal and vertical scrolling.
I suppose it’s a focus problem; anyway for accessibility it would be better to have the focus on the center element.
So it means… javascript.
The only problem I see is the image definition. If you load a huge image into a small window, rescaling may make it look funny, or a image let’s say 1280px large will show big pixels on a huge screen. I generally load a standard image of 1280px as background and overload a bigger one in Ajax if the screen is wider. There is no rescaling in that case but at least there is an absolute control over the background image quality.
This seemed to work fine for me: Supersized
This reminds me of the new WPC2 system I just recently created.
I can’t say too much, but this does make me want to recreate your example with my technique used for resizing the WPC page to see if most of your bugs disappear. If I have any success I’ll reply to this comment and let you know
This is awesome! I thought this was only possible using flash. Thx for the post. Will definitely be using this for a photo gallery page.
The Image bar comes up on IE 6 if you hover over the image
i.e. the Save print etc. buttons that IE overlays.
You might want to kill that, it ruins the effect, Im sure there is some way to do that
Very nice, will give it a try. Thanks!
Was looking at this site’s solution for background images too
http://www.type3digital.com/
Bump – how did they do this?
Yup that question stayed in my head too…:D
I will be using this with one of my clients. Really beats the Javascript I was using. Thanks!
In the demo, in IE8 at least, the mousewheel only scrolls the content when the cursor is inside the white text container, and it’s somewhat sluggish at large resolutions.
Great that it works with CSS, but too many bugs to be used effectively.
I use supersize 2.0 for the same effect (also has transition). I used it here.
Agreed. Supersize 2.0 looks great. Does IT have any bugs or inconsistencies? What if a user doesn’t enable JavaScript?
There is a scroll bar in Opera 9.6, and it scrolls down to white space
Thanks for this – spookily just when I needed it!
There is also a vertical scrollbar in Opera 10b3, but it’s for the text – however, if I scroll down (without clicking the text first) it will scroll the image instead of the text.
In fact, if I middle click on the page, I can scroll to reveal white space both on the y- and x-axis in Opera, Firefox 3.5, Chrome, Safari4 and IE8. This is also the case for whatstheweather, but then only in the right-hand side.
~ Nix
the scrollbar ‘bug’ in FF3.5 isn’t a bug. that’s a keyboard shortcut to scroll down on any page. try it on this page, or google news, or where ever. the shortcut works in Chrome and IE8, too.
The “bug” refers to this technique, not Firefox itself.
I do get whitespace on the top and bottom if the browser is taller than wider of the image proportions. This needs to zoom-center.
can someone explain to me why exactly it is necessary to use a table for this effect? I am assuming that there is some innate abilities a table has that make this possible, but I am not sure what. Learning xhtml from the start I am not very table savvy ;)
Hmm, it’s nice in theory, but current browsers seem to be rather laggy on resize and scroll – And unless you use a high resolution image, chances are you’re going to see very unprofessional artifacts. Good to know for the future though =)
Hi Chris. Thanks for posting this. The NorthFace site has similar functionality but it looks like they use a flash solution.
I love this! This is one of those CSS Tricks I love to see appear rss feed! Alot of people don’t seem to like this, because of little bugs and the evil devil child of the internet design tables. My personal view on this is I hate tables but if it achieves the job without the use of flash or javascript then a table is okay. Semantics is only good and a guide to follow if you can afford it. Lets all remember that the objective is to design nice looking working sites. And these are some damn nice css tricks!
Thanx for thip great tip! I think, i will be use this trick on many sites;) This trick work on ie 5.5. Good Job!
I do something like this:
http://dump.myxcp.net/de…..ound.html
Lacks being centered vertically but works well regardless. Or you can make it 100% height and 100% min-width (then it can be centered horizontally easily).
@monkey56657 I did notice on your example that if your browser is not resized in proportion to the image, it does not cover the entire background vertically.
There’s some funkyness when the browser gets really short in technique 1.
but Technique 2 works great :) Thanks.
In technique 2: If you set the img.bg bottom: 0 instead of top: 0, you can anchor the image to the bottom of the browser window instead of having it anchored to the top. If you had a city-scape or other bottom-designed image, this would become very important.
Technique 2 is very good addition to the article.
@Chris: Could you somehow indicate that this article has been updated ?
Thanks for posting this. One question, why use a table? Anyone tried this without a table and have it working?
There’s a problem in FF3: if i use mousewheel, i can scroll left and down and the white space occurs
If you just mousewheel scroll it, you would see white space all around.
Did you check that?
Nice work Chris, Full page backgrounds are something that I have always been intrigued by, but never really got my head around, due to different image dimensions, screen resolutions etc.
I was sort of under the impression that you would dynamically select a particular image depending on on the client browser size.
This looks pretty good though!
Hi Chris,
i only see “picture” placeholder text in Opera 9.64 on Vista Business 64 Bit. While Firefox shortly renders the page with a background picture and then redirects to your 404 error page…
Greetings
Mathew
Hi Guys,
I love this solution. It’s embed swf obviously. Any idea what’s the Action Script inside of .fla file looks like :) ?
I may have missed it, but is anyone else having trouble displaying the bg image with IE7 or 8? It works beautifully in every other browser, but I get the broken image logo on IE. ugh! I’ve tried both techniques, by the way.
Massively impressed with this and it’s even better now that Doug has came up with a pure CSS solution!
Thank you for the great lesson. Yet, frankly I’m hesitate to apply the technique into my site. Sometimes I include table into DIV tag and the table jumped out of the main wrapper.
Very nice. I will try this on my next project.
Finally I found a good tutorial as well. Thanks
cool. adding this to my faves.
I had to tackle this problem myself recently and have come up with a fairly decent solution that is standards-compliant, uses minimal code (just one extra div), doesn’t use flash and seems to work in all browsers. Try this: http://blog.urbanmainframe.com/2009/05/create-a-dynamically-resizing-background-image-using-css/
Excellent! And what timing…
I saw the site a while back and wondered how they did it. Then I let it go since I couldn’t figure it out thru code!
Kudos for this article!
http://normalbookmark.com/ has a nice JS implementation of the full screen background.
I personally prefer using swf (flash) solution. swf file can be less than 15kb (compressed). I also checked flash samples that people posted above, all look perfect in all browser. Pure CSS solution is nice one, but probably it depends on your image and how big it is, and resizing it a bit tricky if you ask my opinion. In addition, with using flash, resizing is much better handled by flash (speaking from experiences)…http://www.beyondfayte.com is using flash background, yes the site is full flash, but notice the background how beautifully constructed and transitions. Now, image for sec., take that swf file, and implement your site (html and css)….
Nice effect though,Works nicely .
I saw this trick some time ago and also used it… it worked like a charm, but at the moment, using safari there is some problem. it doesn’t adapt in vertical. when the window is not “wide”, the photo doesn’t deform showing the white background here in the demo and the “loading” background on the credited site. But I remember that when I saw that site some time ago I didn’t noticed this problem.
Question – how do I get the best of both worlds? A scrolling page with a full static background. They showed one here – http://ringvemedia.com/introduction.
Hi Chris,
First of all, thanks for the great article.
I am using the Tecnique #2 and I’ve encountered some strange behavior when I started adding additional divs inside the content wrapper.
I don’t want to crowd this side with code but here is the page online
http://www.brentwoodrestaurant.com/bg_test.html
As you’ll see I am trying to put some distance between the divs using margins but when I apply a margin to a DIV that margin gets applied to the parent div for some reason.
I hope I was able to explain my problem and that you have a solution for it.
I am not sure if this is a bug with the script or my fault.
Thanks a lot in advance.
Never mind, I think it was entirely related to my nested divs, nothing to do with the script.
Interesting way of doing it. Seems to work well, thanks :-)
ok so how can we implement this into a wordpress theme?
can we get some help for wordpress users? no one ever talks about where to place this code and even if anyone is using under wordpress. any help is appreciated.
I think this is very well done though I do have a theory…
If you’re not adverse to marrying up your solution along with some php and javascript then you could use js to get the window height and width, then using Joe Lencioni’s Smart Image Resizer you could target your image thusly:
img src="/slir/w<?php echo $width; ?>-h<?php echo $height; ?>/path/to/image.jpg
I would think you could actually resize the images as opposed to just scaling them and thus keep the download times at a minimum. Though this may only create the resized image on page load… and then the rest of your solution could scale it from there…
this is all just thinking aloud. I love Joe’s solution and use it all the time and think that you could incorporate it into this idea with great effect.
Supersized (http://buildinternet.com/project/supersized/) works very well and can be tweaked to allow for content with scroll.
Here is an example: SOUND Phuket http://www.soundphuket.com
Check the calendar page which has a scrollbar.
Yo, there is a mistake in your description!!
change it ffs. took me an hour figuring this out. I guess all the other people were taking the code from the demo site, where it was correct, that’s why nobody else noticed it. (Or maybe I just missed something in the beginning :P).
Anyways, in the description of the technique:
html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}
BUT! in the demo site:
html, body, #bg, #bg table, #bg td, #cont {
…
.
The missing things was the 100% height and width on the #cont. Without it the scrollnig did not function in any of browsers.
cheers.
For technique 1, there seems to be an issue in Opera 10 if you use the scroll wheel or keyboard arrows down.
Indeed, then you see white space you don’t want to be visible.
The solution is to add this to the CSS:
#bg { position: fixed; }This works in all browsers.Nice post, I’m not a big 100% anything fan but this seems to work really well and might even try it out it in one of my site designs, so thanks for this.
Trying to figure out why the image will not show with DW? I even tested it out with EW3 and it works there…any ideas?
The div container that allows for content to be shown leaves a big white box in the middle of the page.
I’d like to request a further tutorial explaining in depth how to make all boxes of coding transparent to blend in with the image so that we may post whatever links and content we want into our respective websites.
A little extra info and we should be able to do virtually anything.
I’m very happy to find it, indeed. I’m photographer and sometimes I use to develop some photography websites, as former graphic designer.
Just a note that the technique #2 streches the image if we F11 the browser.
Thanks for sharing!
Ok I have one final issue to resolve on my website. How do I get the content box to make the paragraph tags separate.
My main page has a bunch of paragraph tags in it but they’re all bunched together instead of being spread out after being put into the content box.
I’m a little late catching on to this, but I love it! This changes my approach to design significantly. Thank you Chris.
This seems like a good solution, specially for clients who can be picky about what gets displayed to visitors. The only downside I can see here is the interpolation/resolution for larger monitors vs background file size. Great stuff. Thanks
Awesome stuff…!
It solved all my “oh no!-no-image-background” problems. :D
It helped me very well esp. for my computer project.
-thumbs up-