[SOLVED] Problems with Scalable Background Image in Firefox Only
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.
HTML Code:
img#bg { Regards, Alan OldStudent The unexamined life is not worth living—Socrates Gracias a la vida, que me ha dado tanto—Violeta Parra |
If it was working, what other changes did you make?
Add any new plugins or update anything? |
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 |
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 |
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"> |
Hi Jill,
Thanks for the suggestions and feedback. You wrote: Quote:
Quote:
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:
Regards, Alan OldStudent The unexamined life is not worth living—Socrates Gracias a la vida, que me ha dado tanto—Violeta Parra |
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. |
Quote:
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 |
I'd go post the short bit of code I gave you.
|
Quote:
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 |
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:
Regards, Alan OldStudent The unexamined life is not worth living—Socrates Gracias a la vida, que me ha dado tanto—Violeta Parra |
I'm watching this thread very interested to see the outcome so I'll help test :)
|
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 { |
Quote:
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:
Regards, Alan OldStudent The unexamined life is not worth living—Socrates Gracias a la vida, que me ha dado tanto—Violeta Parra |
1 Attachment(s)
Quote:
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 |
Hi JD,
You wrote: Quote:
Quote:
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 |
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; Code:
.index { 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). |
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 :) |
Quote:
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 |
Quote:
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> File with "Contain" attribute Code:
<!DOCTYPE html> 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 |
Ah. Your contain example didn't give the same result my contain test did. I was getting similar/same as your cover example/result. :p
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. |
Quote:
Regards, Alan OldStudent The unexamined life is not worth living—Socrates Gracias a la vida, que me ha dado tanto—Violeta Parra |
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 Code:
html { |
Quote:
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'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--> 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)--> 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 |
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. |
All times are GMT -6. The time now is 09:25 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.