SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Location
    Los Angeles, CA, USA
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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.

    main_notebk_bkgrnd2.png

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Nice solution, ronpat.

    @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.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Visited Bugzilla@Mozilla and found a new bug report:

    https://bugzilla.mozilla.org/show_bug.cgi?id=816917
    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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    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

    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.

    Code:
    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. #6
    SitePoint Member
    Join Date
    Oct 2007
    Location
    Los Angeles, CA, USA
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •