CSS Shadow applying to children background images

Question

I've used an inset shadow for the parent header element

 -webkit-box-shadow:inset 0px 0px 50px 10px #e5e5e55; box-shadow:inset 0px 0px 50px 10px #e5e5e5;

This has worked nicely for the parent element. However I have a child element "Logo" where the background image is a JPG. The shadow is applying to the top of the image. Its weird because it shouldn't apply but if it did I would suspect it to apply fully instead it looks like it has been dipped in to part of the shadow ! The image below highlights the right shadow (purple lines) and the wrong shadow (red lines).

In this screenshot the image is a transparent PNG

I have tried Chrome, Firefox and IE all of which have the issue. I know its a little hard to see in that photo but it definitely makes it look unrefined. I have also tried placing the image within the element as opposed to a background image, as well as trying JPG and PNG files, but all have the same result.

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>

Full CSS

Note the image is currently in the element as opposed to a background image but same result 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;}

Answer 1

You can use multiple classes on HTML elements.

Create a new class just for the shadow and add it only where you need.

It is also reusable then on other elements... (if you will need the same shadow).

Answer 2

CSS Shadow is not applying to children background image, it is caused by the .JPG image your are using for logo. You need to have a transparent image for logo, use transparent .gif or .png file. I would recommend .PNG .