I have a ray of light bg behind a button but on top of the current bg

http://www.funfactz.com/

#extrabg {
    background: url('images/ray.png') no-repeat;
    position: absolute;
    width:1006px;
    margin-left:-143px;
    left:50%;
    z-index:1;
    height:517px;
    overflow:hidden;
}

However it extends over the page to the right, how can i stop the unneccessary scroll?

Unrelated - but I noticed you are missing the <ul></ul> in your menu div - you NEED those!

Hmmm, why?

an LI should always be a child of either a UL or an OL

Done. So back to the topic on hand?

You would have to narrow the box that the image is in to stop it from pushing out. The div is defined as 1006px wide, so the only time overflow:hidden would work would be if the image itself were wider than 1006px, then it would clip the image to 1006px. So, the overflow:hidden you have there isn't doing anything because the div is as wide as it's content - not larger.

So any suggestions?

Bump..?

You would have to narrow the box that the image is in to stop it from pushing out.

I guess I'll remove it.