HTML background image stops being replicated in long page
This is a straight HTML (no JavaScript, no CSS) page with a tiled background image (128x128 pixel JPEG). After about 2/3 of the roughly 3,000 lines of this page the background image stops, with a smooth horizontal divide: the tiled image background above, and a white background below. The discontinuity moves up and down some while scrolling this page, but remains a clean horizontal break.
This is new behavior with Firefox 7. The background image was displayed throughout the full page with Firefox 6 and earlier.
All Replies (13)
The background I am using is for the borders. It works on most my sales pages, but the one it stops short on is a very long one. I also have a problem with some that shows the background at the bottom before the footer graphics.
But I know it is FireFox because I tried the page in Internet Explorer and it worked fine. I guess I will just wait for a FF update as I don't find any way to overcome the problem other then take out my repeating background all together and code in a normal border.
MrSaveware
With Firefox 8 I've noticed that the divide between the first part of the page with the border and the remainder that just has a white background isn't always a full screen width; sometimes the break is just after a random tile.
<strike>See [/questions/692350] </strike>
It should ofcource be Bug 692350.
- bug 692350 Table background stops repeating after ~1600 lines
Modified
I am using Firefox 12 and I have the same problem. I tested both straight HTML and CSS and it happens with both.
If I put in code as follows,
<style type="text/css">
body {background-image:url('blahblah.gif');
</style>
it looks fine in Internet Explorer, but in Firefox it stops halfway down the page. This is not a problem with coding, this is a bug and it needs a bug fix.
I have same problem in Firefox. No problem in IE or Chrome. Definite bug. Just showed up in Rel 11 and 12 for me. Older worked fine.
Hi Bluejay and vestibule, can you post URLs for the affected pages so volunteers can have a look? Or, if the heavy end-user support traffic here delays responses, you could try the mozillaZine Web Development board. Separate forum, separate registration. Please note the tips in the Sticky Post at the top of the forum before posting.
I hadn't noticed that I posted a link to a question instead of the Bug with the same number.
- bug 692350 Table background stops repeating after ~1600 lines
Problem with Background repeat Here is link to home page that is long and has the problem.
All long pages have same problem: here is another http://www.hallvworthington.com/waiting.html
They all have the same coding: body { background-image: url(../Image_Files/parchmnt.jpg);
}
I've tried all the suggested coding changes I could find on the web - no luck.
Any solution would be appreciated, particularly by the users of Firefox.
Hi vestibule, the home page renders out to 42072.5px tall, and Firefox has a bug that limits backgrounds to a height of approximately 32735px tall. See Bug 671302 – cairo-gdi: large background-images and gradients don't work beyond ~ 32735px.
This bug is coming up on a year old and for some reason hasn't been fixed yet, perhaps because such long pages are relatively rare on the web. ??
Until that is resolved, to make the "transition" less jarring, you can add a matching background color (this is the closest I can come up with at the moment):
body { background-image: url(Image_Files/parchmnt.jpg); background-color: #f8f8d4; }
Thank you.
I did not realize you could specify a bg color in addition to an image and have the image still function.
The fix is good for my site.
Much appreciate your help.
Okay, here is one of the pages I'm experiencing this on.
Hi Bluejay, the home page renders out to 55298.7px tall, and Firefox has a bug that limits backgrounds to a height of approximately 32735px tall. See Bug 671302 – cairo-gdi: large background-images and gradients don't work beyond ~ 32735px.
This bug is coming up on a year old and for some reason hasn't been fixed yet, perhaps because such long pages are relatively rare on the web. ??
Until that is resolved, to make the "transition" less jarring, you can add a complementary background color. Your image has a lot to choose from, but maybe something like this? Note that I've used the background property, which lets you combine the color and image url in one rule:
body {background: #527A31 url('dreamgreen.gif');}
Jscher2000 - Thank you, I used the color you suggested. It looks fine for now, but I would sure like to see the bug get fixed.