SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Background image below the fold

    I'm having an issue getting IE5 Mac to render my background image below the fold.
    I am using the rule below to include and tile the image.

    body {
    margin: 0px;
    padding: 0px;
    font-family: verdana, arial, sans-serif;
    color: #fff;
    background: #000 url(../img/glbl/bkgrnd.jpg) repeat-x;
    }

    I've tried a few variants of this but none of them seem to work.
    Basically the background image loads and tiles perfectly, above the fold...
    Anything below the fold simply renders the as background color - no image.

    oh, just so you know... the image fades to black...
    it should smoothly 'blend' into the background color.
    Because it's cutting off below the fold - visually it looks like a blunt edge
    Image | Bkgrnd color.

    Any thoughts?

    Thanks.

  2. #2
    SitePoint Enthusiast Cinders117's Avatar
    Join Date
    Apr 2003
    Location
    Kent, OHio
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a guess
    background: #000 url(../img/glbl/bkgrnd.jpg) repeat-x scroll;

    or you could put fixed if you don't want it to scroll
    ~Rebecca

  3. #3
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a total guess...

    see what adding this code does:

    body { border: 1px solid red; }

    If you get a red line accross from the bottom of your bg, and the content follows on after the red line, and if you are using a position: aboslute layout, then it could be that the body element either has a height set somewhere, or 100% is the default height... don't know, see what happedns with a border anyway.

    You could also try this:
    html {
    margin: 0px;
    padding: 0px;
    color: #fff;
    background: #000 url(../img/glbl/bkgrnd.jpg) repeat-x;
    }

    Douglas
    Hello World

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both. I appreciate your thought...
    Unfortunately I am stilll with out a fix.
    The addition of 'scroll' made no visible difference (at least in Mac IE). The addition of 'border' to the body simply make a thick red border along the top of the page... nothing on the sides or bottom. adding the bkgrnd img info to the HTML gave me the same result as having it in the body. This is truly strange...

    Thanks again. If I find a fix - I'll post I here...

  5. #5
    SitePoint Enthusiast Cinders117's Avatar
    Join Date
    Apr 2003
    Location
    Kent, OHio
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show us the css and the html? That might help a bit.
    ~Rebecca

  6. #6
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by coffeeKid
    The addition of 'border' to the body simply make a thick red border along the top of the page... nothing on the sides or bottom.
    When you say "thick" do you mean two pixels?

    If so, then add lots of <br /> tags to your page, as direct decendants of the <body> tag (so not inside a div or anything). Add enough to be taller than the page. See if the red line breaks apart, and see what happens to your background "below the fold".

    Douglas
    Hello World

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,
    The request for code...

    body#home {
    margin: 0px;
    padding: 0px;
    font-family: verdana, arial, sans-serif;
    color: #333;
    background: #05818d url(../img/home/homebkgrnd.jpg) repeat-x;
    }

    importing the above into a blank (or populated) xhtml document will present the 'cut-off' issue that I am having.

    --

    Adding a border and breaks... adding the breaks did open the border so that it 'wrapped' the page contents... but it did not effect the img.

    Thanks again.

    I'm not sure if this happens for any other browsers... I know it doesn't in NS4/NS6/Moz/Opera5/ all on Mac OS9.

    thanks.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A bit more testing has revealed that the problem is the
    'repeat-x' -- if i remove that the image renders below the fold... the problem is that i need the image to only repeat horz.

    thanks.

  9. #9
    SitePoint Member
    Join Date
    Oct 2004
    Location
    barnes
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A solution perhaps

    This maybe a bit late in the day, but I think I've found an answer to this one.

    I ended up having to use background images that were 64px or wider. Any less and the bg would be cut off at about the fold but at 64px and above it works ok.

    Not sure why this is and if someone could verify/explain I'd be most interested


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
  •