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

Question

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

Answer 1

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/

Answer 2

Looks like in JSFiddle you're applying background to the body tag. That will not work as it will apply the background twice is jsfiddle which uses iframe to render your content - that is why it appears as if the box-shadow is messed up however it is not.

Try removing body tag and body css

instead you can have HTML like this:

<div class="outer-container">
<div id="header">
    <div id="logo"> <a href="<?=base_url(); ?>"><img src="http://pierdevara.com/demo/907pass/assets/img/907pass.png" /></a>

        <div id="navBtn"></div>
    </div>
    <div id="navlist">
        <ul>
            <li><a href="coupons">Coupons</a>
            </li>
            <li><a href="trans">Buy / Activate</a>
            </li>
            <li><a href="about">About</a>
            </li>
        </ul>
    </div>
</div>

And the body css converted to :

.outer-container {
    background: url(http://pierdevara.com/demo/907pass/assets/img/bg_grassy.jpg) no-repeat center center scroll;
    background-width: 2000px;
    background-height: 1300px;
    height:1300px;
}