They use javascript to measure the width of the viewport and then size the image accordingly. The image is actually higher than the viewport, but overflow:hidden solves that issue.
var img = document.getElementById('bgimg');
img.onload = function() {
var ratio = document.body.offsetWidth / img.width;
if (ratio < 1) {
img.height = img.height * ratio;
img.width = img.width * ratio;
}
}
Place the javascript just before the closing </body> tag, or wrap it in a function and use the “on document ready” or “onDOMready” that many javascript frameworks use (or use your own if you don’t want to use a framework), then you can put it in the <head>.
E.g.:
var shrinkwrapbg = function() {
if (arguments.callee.done) return;
arguments.callee.done = true;
var img = document.getElementById('bgimg');
img.onload = function() {
var ratio = document.body.offsetWidth / img.width;
if (ratio < 1) {
img.height = img.height * ratio;
img.width = img.width * ratio;
}
}
}
// Mozilla, Opera
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", shrinkwrapbg, false);
// IE
/*@cc_on @*/
document.write('<script id="ie_onload" defer src="javascript:void(0);"></script>');
document.getElementById('ie_onload').onreadystatechange = function() {
if (this.readyState == 'complete') shrinkwrapbg();
}
/*@*/
// Safari
if (/KHTML|Webkit/i.test(navigator.userAgent)) {
khtmltimer = window.setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
window.clearInterval(khtmltimer);
shrinkwrapbg();
}
}, 10);
}
Ive made the bkg image the same size as the site initiallly mentioned. It shows the bk image, however it doesnt expand to fill the view port, or reduce upon browser resize.
cheers, however what im trying to achieve is full screen without distortion of its ratio. If i use img1 set 100% (for w idth and height) i get a detrimental effect…
The image is increased to fill the viewpoint, without distortion of its ratio. The site uses js to achieve this, however i dont have a clue how to write js…
ok, just a little revisit…thanks both your help with this however i still dont get the results that i would like, and that comes down to the js implimentation (which i dont have a clue about!)
So i would like to have a div that expands full viewpoint, without distortion and that is compatable with ie and opera (sorry MM, i meant this rather than safari). One thing that i dislike (in the original site) is the use of tables and td’s.
Ive been trying to achieve this for while, and i have some websites that i would like to do in the future, therefore i would love to have closure not only so that i can get some work done, but also that i dont take over the js forum with the amount of posts!
If someone could post me the complete solution i would would be more than happy to throw you a few quid.
I haven’t ever used anything like this before but don’t you need to re-initiate that script (the one that raffles wrote) whenever the browser is resized?
ATM it just runs onload… correct?
Maybe something like this: (just an adjustment of Raffles’ script)
var img = document.getElementById('bgimg');
img.onload = resize;
window.onresize = resize;
function resize() {
var ratio = document.body.offsetWidth / img.width;
img.height = img.height * ratio;
img.width = img.width * ratio;
}
Ive used your version of the js, and the image does change depending on the view point, however there is slight distortion on full screen (ive got a benq wide screen) and also if i resize the browser the image reduces leaving whitespace…in opera it just fails example here
If i use mmj’s example (without any js), it functions perfectly (in moz and ie7), but in opera its centralises with white space at top and bottom)
Funny that I have stumbled across your post. I am actually in the exact same battle as you! I know how frustrated you are… as I have been scouring all over the internet for help with this. I’ve posted in several forums and not gotten very far. This is actually what I’ve found and it produces similar effects as the ringvemedia.com example. Check this out… you might find it useful. This guy also provides the correct javascript that is needed for this to work in most browsers… I have not tried it yet as I’ve just been trying to get it to work. Also, in the js code, there is a part that you are going to need to change. Here…
(sorry, I couldn’t post a link… it told me I don’t have enough posts under my belt. that’s pretty retarded. All you have to do is just take out the spaces I put in between the / to disguise the link. (: )
Those lines of code are specifically on lines 8,9, and 10. You want to edit line 9. Check it out. Hope this helps you and gives you a little bit of help. (:
Please don’t forget that because I don’t post enough at sitepoint, I can’t publish links. Please take out the spaces that I have placed next to all of the /'s in order to disguise the link. Sorry again