Background Image Not Always Appearing

HTML & CSS
1

Hey guys,

I have a site that we are rebuilding. It has a large background image which is centered on the body.

However, there are two issues with this that have me stumped:

  • The background image doesn’t always display, but if you scroll down and scroll back up, it shows up.
  • If you have a middle mouse button and click it, you can drag the site WAY out to the right.

The site can be seen here: iD Tech Camps | Summer Computer Camps for Kids, Teens & Youth

Any help would be greatly appreciated.

2

The background seems to work fine for me on Firefox.

As for the scrolling, it’s probably caused by the giant left and right margins/paddings you have on the #sponsors and #footer divs. What are they for?

3

It’s sporadic. Sometimes it works, sometimes it doesn’t. The issue occurs in all browsers I’ve seen.

The padding was to make the footer extend all the way across (even on larger screens), though I realized earlier that I can just do width: 100%. =p I haven’t had a chance to update that yet.

4

Hi,

I would fix the footer first and then remove the overflow-x-hidden from the body (that you have in a couple of places) as you never want to hide the body horizontal scrollbars as that means no one on a smaller screen can use the page.:wink:

In IE7 none of the scrollbars are visible and the page is not usable at all. This seems to be the position:relative in the body styles which is confusing IE7.

I never use the body for centring as it is too buggy and is much better to use an inner container to hold your content instead and avoid all those bugs.

I’m guessing that some of your problems are due to the height:100% on html and then your overflow rules on the body causing content to get cut off (as happens in IE7).

However, after saying all that I didn’t notice any problems in Firefox and IE8 though.

I suggest you change the points mentioned above and then re-test.

5

Thanks Paul. I forgot about my overflow-x, that was back when I was messing with things.

I added a few wrappers and rearranged stuff and it worked like a charm. I’m surprised both of you didn’t find the issue, because we have tested it on a ton of computers and got it a few times. It seems to be all fixed now, so we should be all set. =)

6

Glad you sorted it. :slight_smile:

Yes it’s typical that it didn’t go wrong for us. (Same thing happens when you take your car in the garage and it works fine until you get it home.)