Background on 1 page won't go to bottom ONLY in Firefox on a PC

HTML & CSS
1

Hi,
Only on a PC and in Firefox 17.0.1 does the background image for the container not tile vertically to the bottom. It is an EXCEPTIONALLY long page (over 55500px) but on all the other pages it is OK. In fact, it tiles fine up until the O’s or P’s.

Here is the css code for the part that won’t go all the way down:
.twoColFixLtHdr #container {
width: 1005px;
margin: 0 auto;
background-image: url(images_new/all_pages/main_notebk_bkgrnd.png);
height: 100%;
background-repeat: repeat-y;
}

Here is the page: http://tinyurl.com/bpzb4p5

I have tried various version for height:, I have even put height: 70000px; which makes the page extend longer but does not fix the gap where the background stops and resumes in the footer.

Thanks for your help, I do appreciate you looking at this!
Cheers,
Janell

2

Janell, I have seen the same phenomenon in Firefox, also. It seems to repeat vertical images a limited number of times. There’s probably a bug report about this, but I have not looked. Haven’t thought about it before, but you might try making the image taller. If Firefox’s limitation is the number of repeats, then that should make it extend further.

Here ya go. The original image starts acting bad about half way down the page. This image is 4X the height of the original. Give it a try and let us know what happens.

3

Nice solution, ronpat. :slight_smile:

@s. janell With images turned off, your text is almost unreadable, but people do sometimes have images off (say, when they are preserving bandwidth on mobile). So I would recommend you set a background color on your #container (say, white) and modify your bg image so that it’s not transparent (but has purple in the transparent bits) to avoid the bg color showing through. Just a suggestion for for more bulletproof web design. :slight_smile:

4

Visited Bugzilla@Mozilla and found a new bug report:

2012-11-30 02:36 PST
Bug 816917 -
Summary: DIV background image vertical repeat limited to height below 32768px

However, I have a feeling this trouble has been lurking for quite a while.

It sounds like the taller background-image will do no good.

5

Hi,

32767px is a limit for many things in browsers such as dimensions and margins and the reason that in the sticky footer we use this limit:


body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* negate effect of float*/
}

You will find that many browsers will stop working when dimensions exceed that limit and indeed if you have a page that long then its really time to re-think that page :slight_smile:

You can overcome the problem if you use background-attachment fixed and then the image only needs to repeat to the height of the viewport. It does mean that the image slides off the screen at smaller screen sizes but that can be fixed with a media query for good browsers, but for ie8 and under you would need a polyfill fix.

For ie9+ this is all that’s needed.



html,body{min-width:1005px}

.twoColFixLtHdr #container {
    background-attachment: fixed;
    background-position: 50% 0;
    background-repeat: repeat-y;    
}
@media only screen and (max-width: 1005px) {
.twoColFixLtHdr #container {
background-position: 0 0;
}
}
6

Hi all,
Paul O’B, your code worked perfectly, I just can’t thank you enough. I had no idea that there was a limit to the length of a page. Also, Ralph M., I will most definitely fix the background, good observation.
Thanks to all that responded. You certainly clarified the situation and told me how to fix it.
Cheers,
Janell