[SOLVED] Problems with Scalable Background Image in Firefox Only

Alan_OldStudent · #1 Jan 18, 2015, 04: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, 09: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, 11: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, 02: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, 06: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, 03: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

juggledad · #7 Jan 19, 2015, 04:26 PM

It must be something to due with the new release of FireFox and I can't help you further than that. If it's any consolation, there is a montezuma issue where with the new version of FireFox (35.0) the thumbnails are not showing till you hover over them.Again it works fine in other browsers.

I'll bet lots of people start seeing odd things and there will be a new version of FireFox in a bit.

Alan_OldStudent · #8 Jan 20, 2015, 01:58 AM

Quote:

Originally Posted by juggledad

It must be something to due with the new release of FireFox and I can't help you further than that. If it's any consolation, there is a montezuma issue where with the new version of FireFox (35.0) the thumbnails are not showing till you hover over them.Again it works fine in other browsers.

I'll bet lots of people start seeing odd things and there will be a new version of FireFox in a bit.

Hi JD,

I went to the Mozilla Bugzilla. What a rabbit warren! I couldn't make heads or tails out of how to report a bug. Mozilla doesn't make their complaint process overly transparent, for some reason.

So I went to the forum, which I haven't visited for years, because it seemed to be rather unhelpful some years ago when I posted there.

I posted my experience and just received an answer. It was rather bemusing. It reminds me of that old saying, "Denial is not a river in Egypt." Check it out by clicking here.

Regards,

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

juggledad · #9 Jan 20, 2015, 03:29 AM

I'd go post the short bit of code I gave you.

Alan_OldStudent · #10 Jan 20, 2015, 09:04 PM

Quote:

Originally Posted by juggledad

I'd go post the short bit of code I gave you.

Hi JD,

I went and did that. I got a couple of responses. One responder suggested I use "background-image" instead of an image. Check out the exchange by clicking here.

I'm wondering, is there a way of having a scalable background using "background-image"? I played around with it a bit and am afraid I don't know enough about CSS to know how to do it.

Regards,

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

Alan_OldStudent · #11 Jan 20, 2015, 10:37 PM

Hey JD,

I did a little test on my locally-installed copy of my website, and it seems to be working. I wanted to run this by you and see what you think:

I went to "ATO->Add HTML/CSS Inserts->HTML Inserts" and took out this:

Code:

<img src="http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo-c.gif" id="bg" />

I then went to "ATO->Add HTML/CSS Inserts->CSS Inserts" and removed this:

Code:

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

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

I then went to "ATO>addHTML/CSS/Inserts>HTML Inserts: Body Top" and added this:

Code:

<!--Responsive BG image (I hope)-->
<html style="
      background: url(http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo-c.gif) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
";>
<!--Shamelessly stolen from a website I lost track of-->

Whaddaya think? Should I try it on my live site? And if I do, will you and others test it?

Regards,

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

stevinoz · #12 Jan 21, 2015, 02:03 AM

I'm watching this thread very interested to see the outcome so I'll help test

juggledad · #13 Jan 21, 2015, 06:51 AM

There is always more than one way. If it works, go for it. I'd put it in the CSS Inserts with

HTML Code:

html {
      background:  url([url]http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo-c.gif[/url]) no-repeat  fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-position: left top; 
}

the background-position will get you the gradiant on the left.

Alan_OldStudent · #14 Jan 21, 2015, 04:37 PM

Quote:

Originally Posted by juggledad

There is always more than one way. If it works, go for it. I'd put it in the CSS Inserts with

HTML Code:

html {
      background:  url([url]http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo-c.gif[/url]) no-repeat  fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-position: left top; 
}

the background-position will get you the gradiant on the left.

Hi JD,

Your code did not work. So I used a modification of my code. I think it works, but I'm not sure until I hear back from others. So if you and readers such as JAM and Stevinoz could see if the site displays properly on your browsers, especially FireFox, I'd be grateful. The site, once again, is here: http://15nowtacoma.info/

My modification was that I replaced the "no-repeat center center fixed" with "no-repeat fixed" (omitting "center center"). That ensures the gradient on the left always displays (I hope).

In order to work, this must be placed in "ATO>addHTML/CSS/Inserts>HTML Inserts: Body Top"

***************
For those of you who are following this thread and who want to adapt it, here is how I did it:

Go to "ATO>addHTML/CSS/Inserts>HTML Inserts: Body Top"

Insert this code (after modifying the path to your background image)

Code:

<!--Responsive BG image-->
<html style="[
      background: url(http://MySite/wp-content/.../MyBackgroundImage.gif) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
";>
<!--Shamelessly stolen from a website I lost track of, modified with Juggledad's suggestion-->

My intent is that this code fills the entire background of the screen without distortion. If the aspect ratio of your image differs from the screen you're looking at, it shows as much of the image as possible, always ensuring that the upper left corner of the image is in the upper left corner of the screen.

Regards,

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

juggledad · #15 Jan 21, 2015, 06:04 PM

Quote:

Your code did not work.

ummm well it was a test...yeah a test (I like that) not a typo...to see if you would catch the 'url([url]' which is clearly bad css.

looks fine for me - it's still a big image though 334K I changed it to a jpeg and reduced the quality to 30% and ended up with an image that is only 66K

Alan_OldStudent · #16 Jan 21, 2015, 08:08 PM

Hi JD,

You wrote:

Quote:

Originally Posted by juggledad

ummm well it was a test...yeah a test (I like that) not a typo...to see if you would catch the 'url([url]' which is clearly bad css.

.....

Never mind. You've been a big help. This board is certainly more helpful and friendlier than the Mozilla board.

Quote:

Originally Posted by juggledad

looks fine for me - it's still a big image though 334K I changed it to a jpeg and reduced the quality to 30% and ended up with an image that is only 66K

Yeah, I know that PNG was too large. I substituted your JPG for it, and I appreciate it very much. The GIF I had tried for a while did not have the quality I wanted, but it worked marginally better with the FF bug. Your JPG looks about as good as the much bigger PNG, and I appreciate your having gone to the trouble.

If JAM or Stevinoz are still monitoring this thread, would you mind testing the site in FF and letting me know if it comes up okay? Once again, the URL is this: http://15nowtacoma.info/

Regards,

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

Jam · #17 Jan 21, 2015, 08:18 PM

Displaying correctly now in Firefox Alan.
I use a bit of code to make a background image scalable, will dig it out, BRB

The CSS I use in a Themeframe site is:

Code:

background-size: contain !important;

So if you tried something like:

Code:

.index {
background: url(http://www.redbackgraphics.com.au/images/15NOWTacomaStrip.jpg;
background-size: contain !important;
}

That will create a responsive full width background. As you are using ATA, you probably need to add the code to your body, not sure.

You only need an image 100% wide (existing width), but only needs to be one logo deep. Take a copy of image in code above (18kb).

stevinoz · #18 Jan 21, 2015, 11:58 PM

Looks fine to me on:
IE11, FF29.0.1, FF33.0.2, FF35.0, Chrome39.0.2, Chrome40.0.2
background was fixed and full window.
Good oportunity to update my browsers

Alan_OldStudent · #19 Jan 22, 2015, 12:22 AM

Quote:

Originally Posted by stevinoz

Looks fine to me on:
IE11, FF29.0.1, FF33.0.2, FF35.0, Chrome39.0.2, Chrome40.0.2
background was fixed and full window.
Good oportunity to update my browsers

Thanks Stevinoz,

I appreciate your checking this out.

Regards,

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

Alan_OldStudent · #20 Jan 22, 2015, 12:43 AM

Quote:

Originally Posted by Jam

Displaying correctly now in Firefox Alan.
I use a bit of code to make a background image scalable, will dig it out, BRB

The CSS I use in a Themeframe site is:

Code:

background-size: contain !important;

So if you tried something like:

Code:

.index {
background: url(http://www.redbackgraphics.com.au/images/15NOWTacomaStrip.jpg;
background-size: contain !important;
}

That will create a responsive full width background. As you are using ATA, you probably need to add the code to your body, not sure.

You only need an image 100% wide (existing width), but only needs to be one logo deep. Take a copy of image in code above (18kb).

Hi JAM,

I appreciate your going to the trouble of making that graphic and posting your suggestion. Unfortunately, I was unable to make your code as written work for me.

That motivated me to do a bit of experimenting and investigating. First of all, I wanted to know more about the difference between "background-size: cover" and "background-size: contain", and so I checked out this Mozilla Developer article.

Then I developed 2 mini HTML files to test the difference. You can check out how they display in your browser:

File with "Cover" attribute

Code:

<!DOCTYPE html>
<html lang="en">
<html style="
background: url(http://www.redbackgraphics.com.au/images/15NOWTacomaStrip.jpg) ;
background-size: cover;";>
</body>
</html>

File with "Contain" attribute

Code:

<!DOCTYPE html>
<html lang="en">
<html style="
background: url(http://www.redbackgraphics.com.au/images/15NOWTacomaStrip.jpg) ;
background-size: contain !important;";>
</body>
</html>

I thought the one with "cover" would be more acceptable had I decided to use your idea of having a graphic which is only 1 logo deep. At least made each row stretch entirely across the viewport. However, I did not like the way the gradient rendered on the left side compared to the code I am now using.

Maybe because I am not that knowledgeable about CSS, I couldn't make "contain" work. The graphic was so small and shrunken that the impact of the logo was lost entirely.

Again, I appreciate the time and energy you have given in helping me with this topic and in some other areas of this forum as well.

Regards,

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

Jam · #21 Jan 22, 2015, 02:14 AM

Ah. Your contain example didn't give the same result my contain test did. I was getting similar/same as your cover example/result.

Its all good, testing and playing with code, always gets a result. The more you play the more you learn. Glad you have it sorted.

Alan_OldStudent · #22 Jan 22, 2015, 04:44 AM

Quote:

Originally Posted by Jam

Ah. Your contain example didn't give the same result my contain test did. I was getting similar/same as your cover example/result.

Its all good, testing and playing with code, always gets a result. The more you play the more you learn. Glad you have it sorted.

And thank you so much for your help and encouragement. You're a peach!

Regards,

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

juggledad · #23 Jan 22, 2015, 05:04 AM

Alan, I'd recommend you put your styling in the 'CSS Inserts' option instead of making it an in stream styling.

so take this out of the 'HTML Inserts: Body Top'

HTML Code:

<!--Responsive BG image-->
<html style="[
      background: url(http://MySite/wp-content/.../MyBackgroundImage.gif) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
";>
<!--Shamelessly stolen from a website I lost track of, modified with Juggledad's suggestion-->

and put this in the 'CSS Inserts'

HTML Code:

html {
      background: url(http://MySite/wp-content/.../MyBackgroundImage.gif) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Easier to maintain if all your CSS is in one place and less chance to mess yourself up if you decide to chance it in teh future.

Alan_OldStudent · #24 Jan 22, 2015, 02:51 PM

Quote:

Originally Posted by juggledad

Alan, I'd recommend you put your styling in the 'CSS Inserts' option instead of making it an in stream styling.

so take this out of the 'HTML Inserts: Body Top'

HTML Code:

<!--Responsive BG image-->
<html style="[
      background: url(http://MySite/wp-content/.../MyBackgroundImage.gif) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
";>
<!--Shamelessly stolen from a website I lost track of, modified with Juggledad's suggestion-->

and put this in the 'CSS Inserts'

HTML Code:

html {
      background: url(http://MySite/wp-content/.../MyBackgroundImage.gif) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Easier to maintain if all your CSS is in one place and less chance to mess yourself up if you decide to chance it in teh future.

Hi JD,

I know what you mean about difficulty maintaining stuff and appreciate the caution. The caution is appropriate, especially for someone like me who's knowledge of CSS is a bit spotty. Here's what I do to try to prevent hopelessly confusing my ancient brain cells.

I keep careful notes about what I do.
I keep backups of my sites, and I do weekly backups (I maintain 3 sites right now)
I do most of my experimenting in a locally-installed WAMP, and I test my backups by installing them on the WAMP.
I do most of my experiments on the WAMP'd version of my site before I go live.
I carefully COMMENT my code.

I've been using the JPG that you made of my background image (which I named this in your honor: background_Logo_c_fromJD.jpg), and so I went to my WAMP and used this massaged bit of code, which is your suggestion:

Code:

<!--Juggledad's suggestion-->
html {
      background: url(http://15nowtacoma.info/wp-content/ata-images/ata-background/background_Logo_c_fromJD.jpg) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
<!--End of Juggledad's suggestion-->

As it is written, your code doesn't seem to work for me.

I put your code in "ATO>Add HTML/CSS Inserts>CSS Inserts," and your code didn't work there. I noticed the documentation in that section says: "Add CSS code here that you want to append to your theme's CSS file." I thought a bit about that, because my code didn't work there either.

So I tried to add your code to the "ATO>Add HTML/CSS Inserts>HTML Inserts: Body Top." Once again, the code did not work.

However, this code did work:

Code:

<!--Responsive BG image (I hope)-->
<html style="
      background: url(http://15nowtacoma.info/wp-content/ata-images/ata-background/background_Logo_c_fromJD.jpg) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
";>
<!--Shamelessly stolen from a website I lost track of-->

But it only works when I put it in "ATO>Add HTML/CSS Inserts>HTML Inserts: Body Top"

Right now, the site is working (I think), and so I am probably going to keep it as is unless it gets broken again.

Regards,

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

juggledad · #25 Jan 22, 2015, 04:43 PM

Alan could you do an export of your settings and attach them to a reply (use the paper clip icon)

I got the same results in both cases on my site - I did have to make the body style have 'background: transparent' and set the layout width to 80%.

I'd like to see what you have.