CSS Background image below the fold

**coffeeKid** · Aug 8, 2003, 12:13

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.

**Cinders117** · Aug 8, 2003, 14:18

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

**DougBTX** · Aug 8, 2003, 14:59

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

**coffeeKid** · Aug 9, 2003, 09:03

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

**Cinders117** · Aug 9, 2003, 11:12

Can you show us the css and the html? That might help a bit.

**DougBTX** · Aug 9, 2003, 13:23

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

**coffeeKid** · Aug 11, 2003, 07:45

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.

**coffeeKid** · Aug 11, 2003, 08:10

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.

**patshone** · Oct 28, 2004, 03:25

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

The SitePoint Forums have moved.

User Tag List

Thread: CSS Background image below the fold

Thread Tools

Display

CSS Background image below the fold

A solution perhaps

Bookmarks

Bookmarks

Posting Permissions