CODEWITHSUNDEEP
css
user736893
user736893

Reputation:

Shadow over element with background image?

In the following example I have two elements. One has a background image for the content section and the other does not. Both headers have a box-shadow property. How can I make the shadow visible above the element with the background image set?

.testcontainer {
  width: 200px;
  display: inline-block;
  border: 1px solid gray;
  height: 120px;
}

.header {
  height: 20px;
  background-color: cornflowerblue;
  color: white;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.content {
  height: 100px;
}

#hasbgimage {
  background-image: url("https://via.placeholder.com/200x100");
  background-size: cover;
}
<div class="testcontainer">
  <div class="header">test with no image</div>
  <div class="content"></div>
</div>
<div class="testcontainer">
  <div class="header">test with image</div>
  <div class="content" id="hasbgimage"></div>
</div>

Upvotes: 0

Views: 426

Answers (3)

Boric
Boric

Reputation: 872

Add a child div and set your background image on it instead, so it is not overriding the box shadow.

.testcontainer {
  width: 200px;
  display: inline-block;
  border: 1px solid gray;
  height: 120px;
}

.header {
  position:relative; /*And don't forget this !!!*/
  z-index:2;
  height: 20px;
  background-color: cornflowerblue;
  color: white;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.content {
  height: 100px;
}

#hasbgimage {
  background-image: url("https://via.placeholder.com/200x100/aabbcc/");
  background-size: cover;
  height:100%;
  width:100%;
}
<div class="testcontainer">
  <div class="header">test with no image</div>
  <div class="content"></div>
</div>
<div class="testcontainer">
  <div class="header">test with image</div>
  <div class="content">
    <div  id="hasbgimage"></div>
  </div>
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272965

You may simply add z-index to the first element to make it above with its box-shadow also

.testcontainer {
  width: 200px;
  display: inline-block;
  border: 1px solid gray;
  height: 120px;
}

.header {
  position:relative; /*And don't forget this !!!*/
  z-index:2;
  height: 20px;
  background-color: cornflowerblue;
  color: white;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.content {
  height: 100px;
}

#hasbgimage {
  background-image: url("https://via.placeholder.com/200x100");
  background-size: cover;
}
<div class="testcontainer">
  <div class="header">test with no image</div>
  <div class="content"></div>
</div>
<div class="testcontainer">
  <div class="header">test with image</div>
  <div class="content" id="hasbgimage"></div>
</div>

Upvotes: 1

Banzay
Banzay

Reputation: 9470

You can simply define inset shadow for #hasbgimage

.testcontainer {
  width: 200px;
  display: inline-block;
  border: 1px solid gray;
  height: 120px;
}

.header {
  height: 20px;
  background-color: cornflowerblue;
  color: white;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.content {
  height: 100px;
}

#hasbgimage {
  background-image: url("https://via.placeholder.com/200x100");
  background-size: cover;
    -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
<div class="testcontainer">
  <div class="header">test with no image</div>
  <div class="content"></div>
</div>
<div class="testcontainer">
  <div class="header">test with image</div>
  <div class="content" id="hasbgimage"></div>
</div>

Upvotes: 1

Related Questions