[SOLVED] Problems with Scalable Background Image in Firefox Only

Alan_OldStudent · #1 Jan 18, 2015, 03:28 PM

The website I am having a problem with is here: http://15nowtacoma.info/

About 3 weeks ago, I followed the directions in this thread and was quite happy with the result.

However, over the past few days, only the very top of the background image displays when using Firefox. This problem does not seem to happen with IE or Chrome.

I triple-checked the coding in “ATO->Body, Text & Links->Body Style” and made sure there was no “background statement.
I went to “ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top and added in this: “<img src="http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo.png" id="bg" />” I checked the URL to the graphic and it works, shows up well in FF
I went to ATO->Add HTML/CSS Inserts->CSS Inserts and added this code:

HTML Code:

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#wrapper {
position:relative;
z-index:1;
}

Can anyone give me some insight as to what the problem is?

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra

juggledad · #2 Jan 18, 2015, 08:11 PM

If it was working, what other changes did you make?
Add any new plugins or update anything?

Alan_OldStudent · #3 Jan 18, 2015, 10:08 PM

Hi JD,

You asked me the same question I just asked myself.

I had added a new post, and it had a new graphic. This is a link to the post.

The whole problem seems bizarre, as it is intermittent and only affects FF. Even after adding that post, the site displays okay on some occasions.

I flushed my FF cache, and that seems not to be a factor.

This problem does not manifest itself in IE, Chrome, or in Safari on my IPAD. It's the intermittent nature of the problem, seemingly unrelated to other factors which puzzles and worries me.

So I began to wonder if the size of the background image had something to do with it.

I reduced the background from being a PNG to being a GIF. The original PNG was 333,985 kb, and the GIF is 54,565, about 1/6 the size of the original. Of course, to my eye, the GIF has far less clarity and detail than does the PNG. But it's a background, and perhaps (as my mother used to say), "It'll never be noticed on the running horse."

The site seems to be working presently as I am writing this, but I don't know if this problem will suddenly spring up again.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra

Jam · #4 Jan 19, 2015, 01:14 AM

I only see background image fill top approx 250px (Firefox). Have you told the image to repeat, or is it much deeper than 250px?
Edit: In Chrome its repeating fine. Why dont you use just one copy of the logo and repeat it, then the image could be teeny weeny small vs the large image of many identical logos

juggledad · #5 Jan 19, 2015, 05:02 AM

Oh wow, I was on Firefox 34.0.5 and was going to ask you what version of Firefox you were using. I checked for updates and saw vrsion 35.0 was available so I updated and now I see the issue.

This is a bug in how FireFox is displaying things - I just refreshed the page and
the bg image was 1/4 the page
then 1/2 the page
then the full page.

I stripped everything out to show that it is not a theme or wordpress issue. Put this code in a text file with an extension of '.html' and open it in FireFox and refresh a couple times and the issue should show up.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>15 Now Tacoma</title>
<style type="text/css">

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#wrapper {
position:relative;
z-index:1;
}
</style>
	
</head>
<body>
<img src="http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo-c.gif" id="bg" />
<div id="wrapper">
</div>
</body>
</html>

You might want to report this to Mozilla...

Alan_OldStudent · #6 Jan 19, 2015, 02:44 PM

Hi Jill,

Thanks for the suggestions and feedback.

You wrote:

Quote:

Originally Posted by Jam

I only see background image fill top approx 250px (Firefox). Have you told the image to repeat, or is it much deeper than 250px?

It's actually much deeper than that

Quote:

Originally Posted by Jam

Why dont you use just one copy of the logo and repeat it, then the image could be teeny weeny small vs the large image of many identical logos

I can create a tiny graphic based on the logo and just repeat it. Apparently, as JD discovered, a FF bug is probably responsible. I had wanted to use the big graphic because of the subtle color changes. Check out the big graphic by clicking here (goes to http://15nowtacoma.info/extras/background_display.html

I've just got to figure out how to do it. I'm not entirely clear. Can you give me a wee hint?
************
************
************

Hi JD,

You wrote:

Quote:

Originally Posted by juggledad

Oh wow, I was on Firefox 34.0.5 and was going to ask you what version of Firefox you were using. I checked for updates and saw vrsion 35.0 was available so I updated and now I see the issue.

This is a bug in how FireFox is displaying things - I just refreshed the page and
the bg image was 1/4 the page
then 1/2 the page
then the full page...

I ran the test you suggested and even put it online in preparation for reporting this bug to Mozilla. It seems to be okay now. I don't know why. That's the puzzling thing about this. The problem manifests intermittently.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra