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. This makes sure the image is clipped to fit the Let’s put some specifics on it:But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead.The especially clever bit is using a media query to check if the browser window is smaller than the image, and using a combo percentage-left and negative left margin to keep it centered regardless.One rather simple way to handle this is to put an inline image on the page, fixed position it to the upper left, and give it a min-width and min-height of 100%, preserving it’s aspect ratio.However, this doesn’t center the image and that’s a pretty common desire here… So, we can fix that by wrapping the image in a div. in the following diagram.The aspect ratio of an empty, block-level element can be controlled by setting Greatly appreciated.Hi, I really curious which of those techniques used at TouchArcade.com – I want to make my blog similar like that, with cool background imageI have to say I love it, but as always won’t work on IE 6 (extinc disonaur), I will have to say I would the jquery method well because I love javascript, thanks for the post, it helped :)Of course, you always have to be careful just how big that background photo will be. 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. Just set the fullscreen mixin to a Class and you can change it.Thanks for the prompt response. Thank you!thanks for this grea tutorial, what are the image dimensions supposed to be ?Watch out guys, there is a bug in Snap Mode in Windows 8 when you do this the CSS3 way.Please, drop me a line if you have found a solution.I used this on the body element to fix IE8 with a conditional css file.IE8 is used throughout the company so it was essential it got dealt with tested also in IE Tester.My mistake position fixed on body element didn’t work used this instead:Hi Chris… I interest with this topic. I’d also suggest to include some image rendering properties for smoother results:Hi Chris, you might also want to check out the jQuery plugin Hi Andy, I would like to share a jQuery plugin that does the same thing: My web page has pink colored background screen image. Google Images. 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! The source image is cropped, and below specific maximum dimensions You may be aware that Stu Nichols in England played with this OS sensitivity-thing using a white-rabbit image in 2002.2) Oh, and at the same time, using Safari, Chrome or IE, Mac or PC, your comments in this comment section overlap, so not readable, sadly.2013 Christmas day W3C paradigm shift? This is also the case for whatstheweather, but then only in the right-hand side.the scrollbar ‘bug’ in FF3.5 isn’t a bug. I thought this was only possible using flash. We’ll use the html element (better than body as it’s always at least the height of the browser window). implementation.The way that the cover image scales, and changes aspect ratio, is illustrated Geometric background. The Bootstrap background image property sets one or more background images for an element. Does it work in all browsers ?This is a really bad way to handle full screen backgrounds, geekbay. Great stuff. Thnx!Excellent resource. The content you concern about with accessibility is on the DIV.Fine!? Thank you Chris.This seems like a good solution, specially for clients who can be picky about what gets displayed to visitors. freepik. 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).It never ceases to amaze me how much hate tables have generated within the design community :)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? I know… it’s not ‘pure’, but it does the trick so well…I was able to target the img with JQuery to have it fade in on page load exactly as I wanted – once the image was really ready for display – no room for error and no room for JQuery launching the fadein before the image had finished downloading. If you use this, please feel free to leave what technique you used and if you altered it in any way in the comments below. What if a user doesn’t enable JavaScript?There is a scroll bar in Opera 9.6, and it scrolls down to white spaceThere 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.