SUBSCRIBEAfter our web designer Eirik launched the GOTOCHINA-website, there have been a lot of writings around on the web on how to do the full-screen image-effect. There have also been developers sending mails and wondering about how this technique both can center the image and scale proportionally. So therefore, in this post we’re going to give you a explanation of how it all works.
Step 1:
Unlike most full-size-background techniques, we want the image to remain relative to the center of the screen, and not to the default upper left corner coordinate. Example:
To do this, we start of by creating a holder that is 200% the size of our original area, and placing it equally outdented from the body on every side:
[css]html,body{width:100%;height:100%;overflow:hidden} /*to give the #holder something to relate to and prevent scrollbars*/
#holder{position:absolute;width:200%;height:200%;top:-50%;left:-50%} /*with IE vertical centering-fix from http://www.jakpsatweb.cz/css/css-vertical-center-solution.html*/
#holder[id]{display:table} /*for standard-browsers*/[/css]
Step 2:
Inside this holder, we create a div that stays centered from the top:
[css]#holder div{position:absolute;left:0;top:50%;width:100%} /*with IE-fix*/
#holder[id] div{display:table-cell;vertical-align:middle;position:static} /*for standard-browsers*/
*:first-child+html #holder div{position:absolute}/*force IE 7 back to position:absoulte*/
[/css]
Step 3:
Now we can add our image and make it center, aligned to the parent div. The -ms-interpolation-mode-variable is trick to force IE to anti-alias when resizing the image.
[css]#holder img{position:relative;top:-50%;margin:0 auto;display:block;-ms-interpolation-mode: bicubic;width:100%}/*Setting width here creates a look-alike fallback for browsers without javascript*/[/css]
Step 4:
Since the body now is all covered with a huge image, we need to make a “new” body, where we can put our content:
[css]#body{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;overflow:auto}[/css]
Step 5:
Create a javascript file called scaler.js. To avoid the need of any “domready” or “onload” events, we are going to place this script just after our #body-div. The script:
[javascript](function(){
var db=document.body;
var img=document.getElementById(‘holder’).getElementsByTagName(‘img’)[0];
var dbsize={}; //needed to store body size
var imgsrc=img.src; //needed to store images src
var keyStop=function(e){
var e=window.event||e||{};
var tag=e.target.tagName.toLowerCase();
if(tag!=’textarea’&&!(tag==’input’&&(e.target.type==’text’||e.target.type==’password’))){ //are the user not writing?
if(e.keyCode==32||e.keyCode==39||e.keyCode==40){ //Did he press any of the "scrolling-keys"? (down, right, and space key)
if(e.preventDefault)e.preventDefault();
else e.returnValue=false;
}
}
}
if(this.addEventListener)window.addEventListener(‘keydown’,keyStop,false);
else window.attachEvent(‘onkeydown’,keyStop);
setInterval(function(){
window.scrollTo(0,0);
if(img.complete){ //check if image has loaded
if(db.clientWidth!=dbsize.w||db.clientHeight!=dbsize.h||img.src!=imgsrc){ //check if size or img size has changed
imgsrc=img.src; //store current src
dbsize.w=db.clientWidth; //store current body width
dbsize.h=db.clientHeight; //store current body height
var newwidth=Math.round(dbsize.h*(img.offsetWidth/img.offsetHeight)); //calculate new width based on height
img.style.width=(dbsize.w>newwidth?dbsize.w:newwidth)+’px’; //use the largest value of body-width and newwidht
//and this is the real trick: if there’s no specified height, the height is automaticly calculated relative to the with
}
}
},300);
})();[/javascript]
Step 6:
The HTML:
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>Scaler</title>
<link rel="stylesheet" type="text/css" href="scaler.css" />
<meta http-equiv="imagetoolbar" content="no" /> <!–Prevent IEs anoying imgage toolbar–>
</head>
<body>
<div id="holder">
<div><img alt="" src="your_photo.jpg" /></div>
</div>
<div id="body">
Your content
</div>
<script type="text/javascript" src="scaler.js"></script>
</body>
</html>[/html]
Will D. White
10.04.09Thats a pretty awesome technique. I can’t wait to see folk’s take on that in the future. Until flash becomes fully SEO integrated coming up with techniques like this is one of the things designers should be doing if they want to call themselves innovative.
Cody
10.04.09Why not just design it with a single div, and do it all with Javascript since you need to script the image resize anyhow? The CSS seems pretty pointless and can be done all in JS…. Is there some benefit to the CSS *tricks* I am missing?
Eirik
10.04.09Well, the trick with css etc. is 2 things;
- this way, the browser does most of the math natively
- even if javascript is disabled, the result won’t be far from the wanted effect :)
Smitty
14.04.09No disrespect.. but ever notice what happens in Firefox on a mac when you hit the space bar?
Eirik
14.04.09@Smitty: You’re right, thanks for the tip :) Source-code is now updated
Stephan
21.04.09Great tutorial, but could you optimize your code for IE7?
It’s because IE7 doesn’t want to show the image.
All other browsers (incl. IE6!) seem to work.
Stephan
21.04.09Supplement:
It seems, that IE7 uses position: static; for #holder div {} instead of position: absolute;
Try to delete position: static; from #holder[id] div {} and you’ll see what I mean.
Eirik
22.04.09@Stephan: Huh, that’s right! I’ve added a conditional comment for IE7 now. Thanks for the tip :)
Stephan
05.05.09Hi Eirik, first of all thanks for the little fix, it worked well.
But I did further browser-testing and found another two problems you might be interested in. Both have to do with »mouse-wheel-scrolling«.
Opera 9.64 scrolls beneath the fullsized image even if there’s no scrollbar or long content on your website. This causes that your content disappears at the top of the page and you’ll get a lot of empty space at the bottom of your page. It’s really ugly. :(
IE7 & IE8 both won’t let you scroll if your mouse-cursor isn’t located over a content div. This has to do with overflow:hidden for body I think which all MSIE have problems with. Do you know a workaround for that?
If you want to check this, just test the GOTOCHINA-website or your demo from above.
Stephan
08.05.09Supplement:
Eirik, I’ve tested your script on the iPhone and I regret to say that it doesn’t work. The background image won’t display at fullscreen on entering the homepage. Even if you try to zoom in your page the script seems not working right. It’s hard to describe how it fails so perhaps you should have a look at your own (iPhone).
Nathan
11.05.09Eirik… Thanks very much for posting this example. can I ask a quick question tho…
is there a reason why the example shows white page background when resized yet the (wonderful) gotochina site does not? Even the rip off site that stole your code seem to not get the whitespace.
Thanks again
Steven
12.05.09Thanks for the great tutorial, but it seems as though there is a problem with either IE7 or IE8. It works great for me in all browsers except IE7. When I then implement the change as suggested to Stephan (“Try to delete position: static; from #holder[id] div {} and you’ll see what I mean.”) it works in IE7, but not in IE8. Do you have a solution for this?
Eirik
12.05.09Hi all you guys, and thanks for the feedback! :) I’ll look into what I can do with IE, and post a revisited example as soon as time allows it. There have to be a solution for the iPhone also I guess, so that will be a fun challenge :
@Nathan: The white page background is due to the time between each interval that resizes the image. If you look at GOTOCHINA, the background image is resized using only CSS. This makes it 100% smooth, but the photos will only size up, not down. So for those who wish larger images for better quality or rely more on a good cropping, the pure CSS solution is not good enough. But I can post a pure CSS if you want to?
theturninggate
13.05.09Hi Eirik,
My name is Matthew and I run http://www.theturninggate.net, where I produce web photo gallery templates for Adobe Lightroom. The GOTOCHINA site is very impressive, and, with your permission, I would love to create a Lightroom template based on your work. Please contact me if you would be willing to discuss this.
Cheers,
Matt
Eirik
16.05.09PS: @Steven: Download the update source-code and you problems will be fixed :)
Fullscreen Images Reloaded | Klipp og Lim | Blog
18.05.09[...] our last post about fullscreen scaling background without flash, we have received lots of feedback and suggestions for improvement. There has also been some [...]
Eirik
18.05.09News! Check out the new version based on mootools and implemented with the gallery functionality from GOTOCHINA and some extra options. The new version is posted at http://klippoglim.no/blog/2009/05/fullscreen-images-reloaded/
@Nathan – the script is somewhat modified now to resize as smooth as possible when working with javascript
@Steven: Do you have any problems in IE8 with the new version?
@Stephan: No, it isn’t iPhone-optimized yet – have to get one of those someday :) The scrolling bug you found in IE, can you explain further? I don’t have any problems scrolling in the new version at least.
@Everyone: Bug testing is welcome :)
Nathan
20.05.09Eirik, Thanks very much for getting back, if you can post the CSS version I would rather use that. I’ll look into the updated js in the mean time.
Good work, really liking the effect.
Daniel
11.06.09Fantastic techique. Great work! . I am having some trouble though when the image loads up in the website. First I get a slightly bigger image covering the whole page and then the image I want imediately after. Its like a double effect. First an enlargement and then the original image. Any idea why this is happening? Thanks for your time and patience in advance. Keep up the good work!
Eirik
12.06.09@Everyone: Script updated at: http://klippoglim.no/blog/2009/05/fullscreen-images-reloaded/
@Nathan: Tryout the script at http://klippoglim.no/blog/2009/05/fullscreen-images-reloaded/ – that version is fully functional using pure css. But the script in the new version only applies javascript if needed so I would highly recommend including the script as well :)
@Daniel: Thanks! Try updating to the new script. If this doesn’t fix your problem, just drop us a mail with your source code and we’ll take a look at it :)
Daniel
26.06.09Hello Eirik the new script did fix the problem I had thanks, but Internet explorer now shows a bar saying ” to help protect your security internet explorer stoped this page from executing scripts and Active X controls that could have access to the system.” I have noticed that this message does not appear in any of the websites you used the full screen technique while navigating on internet explorer. How did you do manage that? Your help would be much apreciated.
Igguana
15.07.09This only happens when you are viewing the website offline (on your hard drive)
Matt
31.08.09Very cool technique! I’ve used it on a hotel site for my company, thanks so much for posting this! One question – on the gotochina site, how do you have the tiled loading.gif load before the larger bg image?
Eirik
01.09.09@Matt: The loading-gif is just the background-image of the body :)
Call me Tausendsassa | Unscharf
06.11.09[...] invented fullscreen image scaling without flash for his GotoChina website (which is great, give it a visit!). I decided to play around with his [...]
David
17.11.09This is soooooo cool!
Thank you for that!
A week of digital life November 25th | The Juicy Cow
25.11.09[...] Fullscreen Image Scaling without Flash | Klipp og Lim | Blog. If you enjoyed this post, make sure you subscribe to my RSS [...]
CM
25.11.09This is exactly what I was working for; well written.
Rob
06.02.10If for some reason you don’t want to use the new script (personally, i don’t want to have a reliance on mootools… here is a quick solution for the image appearing larger before the JS kicks in…
CSS:
#holder img { visibility:hidden;}
JS:
add before ” }
},300);
“;
if(img.style.visibility=’hidden’) {
img.style.visibility = ‘visible’;
}
Hope that’s useful to someone.
Rob
Regneva
13.02.1010x mate
I was looking for this from hours :o)
poops
10.04.10Hello there. Thank you for the great tutorial!
Can I use the source code in a commercial project? Do i have to cross reference you?
michalszota
18.04.10Great solution, and thanks to Rob for the resizing fix!
James
20.04.10@Rob, where exactly do I put that code in the JS? Can’t seem to get it working, but want to get rid of the larger image on load.
admin
04.06.10Hey everyone, Eirik back here!
Big news: The script have gone through a complete rewrite – so head over to the new version for full features list:
http://klippoglim.no/blog/2010/06/ultimate-full-screen-images-without-flash-iphone-and-ipad-friendly/
ps: I am really sorry for the lack of replies on this post, but now we’re in for new times concerning feedback on the new version!
Giovanni
17.06.10Hi people… can i have some support for this version ?
I installed the script from this page and it works perfectly with my website. But i purchased a redirect-domain that when opens, redirects to the main website… when redirecting IE7 and IE8 give me invalid argument at this line
Messagge: is not a valid argument.
Line: 34
Char: 17
URI: http://*****/scaler.js
the line is this ———> img.style.width=(dbsize.w>newwidth?dbsize.w:newwidth)+’px’;
i can’t figure out how is this possible :(….
pow
27.04.11THANKS! Thx, thx!
online college for military
31.03.13If some one needs expert view regarding
running a blog after that i advise him/her to go to see this web site,
Keep up the pleasant job.
näsplastik
17.04.13Good blog you have here.. It’s hard to find excellent writing like yours these days. I truly appreciate individuals like you! Take care!!
spilleautomat
24.05.13Har din beste online spilleautomaten side kan ni nett. Hadde rundspilte
casa til canariaøyvind de populære fruktautomaten Norske Spilleautomatere fra automaten Norske Spilleautomater konkurrerer ifall.
Minimumsinnskudd som automater på nett kan deglaere mer tillsammans hensyn tillsammans fem gevinstlinjer.
Casino ble supre norske favorittautomaten tillsammans spilleautomaten er en mena gamle
Norske Spilleautomater På Nett spilleautomater.
online gambling
29.05.13I loved as much as you’ll receive carried out right here. The sketch is attractive, your authored subject matter stylish. nonetheless, you command get got an impatience over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly very often inside case you shield this hike.
norske spilleautomater
31.05.13Finner betalt hvis ni vant og kan prøve dom det finnes likevel
flere sa ändock det er spesielt på casinosiden.
Wild symbolet erstatter de eldste og mest maksimal innsats
beste online spilleautomaten altså må finnes horder itu spilltilbydere
masse action hele døgnet. Minimumsinnskudd som automater gällande nett kan deglaere mer tillsammans hensyn med
fem gevinstlinjer. Casino ble supre norske favorittautomaten med spilleautomaten ni ett antar gamle Norske Spilleautomater På Nett spilleautomater.