Comments on: Nicely-Fitting Background Images

By: Alex

Alex — Mon, 17 May 2010 19:09:23 +0000

Hello,
sometimes I have to reload the page before the image is displayed correctly. Is this a know issue= How can I solve this problem?

By: Brad Shaw

Brad Shaw — Mon, 14 Dec 2009 07:57:15 +0000

Thanks for that Raffles. Yes, this worked, but you also need to change overflow from hidden to visible on the html, body.

Amazingly enough this script seems to dodge the Firefox scrolling bug over fixed background images too.

Cheers.

By: Raffles

Raffles — Sun, 13 Dec 2009 12:56:58 +0000

@ booyah:

The jumping in scale happens because bgimg.src is set before the resizing happens. If you want to hide it beforehand, then you simply have to toggle the display property:

#bg img {display:none}

Then add this right at the end of the resizeBg function:

bgimg.style.display = ‘block’;

@ Christiaan:

Yes, it would certainly be easy enough to do. All you would have to do whenever you want the image to change is:

1. Make sure the image is preloaded
2. Hide the image
3. Change the src attribute
4. Run the resizeBg function
5. Show the image

It might require a second holder DIV, as this procedure might cause a nasty flash of emptiness.

You could even add a nice fading transition between the two images.

@ Brad

I hadn’t thought of that. The solution is to do the following:

#bg {position:fixed}

By: Brad

Brad — Thu, 10 Dec 2009 15:54:09 +0000

Hi there. This looks like an amazing bit of script, but one thing is stumping me and that is how to get long content to scroll. Do you have any possible solutions for this or am I just missing the obvious perhaps?

Any help would be greatly appreciated!

By: Christiaan

Christiaan — Fri, 21 Aug 2009 08:20:06 +0000

Hey Raffles, this is an awesome thing. It works like a charm, and with a bit of tweaking from my end, now it also looks graphically very well.

However.. I have one question, being: is it possible to make the script more dynamic? The reason is that I would like to use this as a base of an image gallery, and when a new image is clicked, the background changes. Do you reckon this is possible??

Cheers, thanks for the great script Raffles.

By: GammyKnee

GammyKnee — Fri, 12 Jun 2009 09:18:21 +0000

Thank you Mr. Raffles!

You’d think that stretching an image to make best use of available space would be a really common requirement, well served with examples on just about every decent coding site. Not so! Yours is the only one I’ve found that actually does what I need.

By: booyah

booyah — Tue, 03 Mar 2009 02:57:42 +0000

update:
the jumping in scale happens in all OSs and browsers, not just mac. thanks.

By: booyah

booyah — Tue, 03 Mar 2009 02:52:21 +0000

this works great, but have one question.
on a mac, you can see that it loads the whole image first before it resizes it. in other words, you see the image at full scale, then it immediately scales down to the browser.

is it possible to resize the image before you see anything so that you don’t see that jumping in scale of the image?
thanks!

By: king27

king27 — Sun, 01 Feb 2009 17:25:19 +0000

Very very good
Thankssssssssss Raffles
Now run cross-browser
Yo!

By: Raffles

Raffles — Sun, 01 Feb 2009 13:47:57 +0000

Yes, in the JavaScript. The files have been updated, so just look at the sample HTML and JS files for the code. I've tested in FF2/3 and IE6/7 and they work.

By: king27

king27 — Fri, 30 Jan 2009 07:53:57 +0000

Hey Raffles

a mistake in the CODE?!

but… have you modify some code lines?!

and now?! It run correctly both in Firefox and in IE 6/7 ?

yo!

By: Raffles

Raffles — Thu, 29 Jan 2009 22:08:09 +0000

There was a mistake in the code that stopped it working in IE6, should be all OK now.

By: booyah

booyah — Wed, 28 Jan 2009 07:12:43 +0000

Has anyone gotten this to work in ie 6/7 and firefox 2?
Can’t seem to figure it out.

By: king27

king27 — Fri, 08 Aug 2008 08:00:50 +0000

Hi all
i m new to this pages
im interesting in this great script to fit background

i have the same IE6 / 7 problems… on line 38/39 (readyState)!

i ve written down a correct code but… no reason!!! …

the code (from Firefox to Explorer lines):

var alreadyrunflag=0; //flag to indicate whether target function has already been run

if (document.addEventListener)
document.addEventListener(“DOMContentLoaded”, function(){alreadyrunflag=1; init();}, false)
else if (document.all && !window.opera){
document.write(”)
var contentloadtag=document.getElementById(“contentloadtag”)
contentloadtag.onreadystatechange=function(){
if (bgimg.readyState==”complete”){
alreadyrunflag=1;
init();
}
}
}

window.onload=function(){
setTimeout(“if (!alreadyrunflag){init();}”, 0)
}

any reason ?

yo!

Roby

By: Jared

Jared — Wed, 06 Aug 2008 21:06:45 +0000

P.S. The issue seems to be with the “onreadystate” declarations on lines 37 and 38.

The error message I receive when trying to view the page in IE is as follows:

Line: 39
Char: 5
Error: ‘bgimg.readyState’ is null or not an object
Code: 0
URL: http://www.search-this.com/wp-content/uploads/2008/06/fsbg.html