The parent header element has a nice inset shadow applied to it.
-webkit-box-shadow:inset 0px 0px 50px 10px #e5e5e55; box-shadow:inset 0px 0px 50px 10px #e5e5e5;
However, when it comes to the child element "Logo" with a JPG background image, things get a bit strange. The shadow seems to be affecting the top of the image in an unexpected way. It appears as if the image has been partially immersed in the shadow rather than fully covered by it. The image below clearly shows the correct shadow (purple lines) and the incorrect shadow (red lines).
It's worth noting that the image in the screenshot is a transparent PNG.
I've tested this issue on Chrome, Firefox, and IE, and unfortunately, all three browsers display the same problem. Although it might be difficult to spot in the photo, this glitch definitely gives the design a rough look. I've also experimented with using different types of images (PNG and JPG) and placing them within the element rather than as a background image, but the results remain consistent.
Here is the full HTML code for the header:
<div id="header">
<div id="header-level-1">
<div id="header-logo">
<img src="images/logo.png">
</div>
<div id="header-contact">
<p class="header-contact-title">For More Information Call</p>
<p class="header-contact-phone"><a href="tel:xxx">xxx</a></p>
</div>
</div>
<div id="header-level-2">
<div id="header-nav">
</div>
</div>
</div>
And here is the full CSS:
Please note that the image is currently placed inside the element instead of being set as a background image, although the outcome remains the same either way.
#header {width:950px; height:220px; margin:0 auto; margin-top:30px; background-color:#fff; border-radius:15px; -webkit-box-shadow:inset 0px 0px 50px 10px #e5e5e55; box-shadow:inset 0px 0px 50px 10px #e5e5e5;}
#header-level-1 {width:950px;}
#header-level-2 {width:950px;}
#header-logo {width:700px; height:130px; display:inline-block; vertical-align:top;}
#header-contact {width:240px; height:100px; padding-top:30px; color:#76a410; font-size:1.3em; display:inline-block; vertical-align:top;}
#header-contact a:link {color:#00446e; text-decoration:none; font-weight:900; font-size:1.6em;}
#header-contact a:hover {text-decoration:underline; font-weight:800;}
.header-contact-title {display:block; padding:0px; margin:0px;}
.header-contact-phone {display:block; padding:0px; margin:0px; padding-top:5px;}
#header-nav {width:900px; margin-left:25px; height:66px; margin:0 auto; text-align:center; bottom:5px; position:relative; background:url('../images/nav-background.jpg'); border-radius:5px;}
#header-nav a:link, #header-nav a:visited, #header-nav a:active {color:#fff; text-decoration:none; padding-left:6px; padding-right:6px; padding-top:18px; display:inline-block;}