Search code examples
javascriptjqueryhtmlcsshtml5boilerplate

Box shadow rendering incorrectly when element content expands and body has an image background

I have a box shadow applied to a header div. Whenever I display the hidden elements within that header the box shadow doesn't render properly.

<div id="header">
<div id="logo"> 
    <a href="#"><img src="logo.png" /></a>
    <div id="navBtn"></div>
</div>
<div id="navlist"> <!-- hidden -->
    <ul>
        <li><a href="coupons">Coupons</a>
        </li>
        <li><a href="trans">Buy</a>
        </li>
        <li><a href="about">About</a>
        </li>
    </ul>
</div>
</div>

I've tried removing the background image from the body and when I do the issue no longer occurs. Any ideas on what the problem might be?

JSFiddle Demo

Solution

  • It's because you're using background-attachment: scroll; - as it's value implies, the background scrolls with the content of the page (your header). You should instead use fixed so that the background-image is fixed with regard to the viewport.

    Also note that background-width and background-height are not valid CSS properties, I believe you're instead looking for the background-size property.

    http://jsfiddle.net/RGLR3/6/