Could background-color have different z-index than img?

user_14028490 0
Viewed 949

I need to one image overlap an another. But the second image have background color and I need the first image between the second and second's background-color. It is possible? Already tried to made a new "div class" instead of style="background-color". Now i am stuck with this:

.mainRunner {
  position: relative;
}

.firstimage {
  position: relative;
  z-index: 2;
}

.secondimage {
  position: relative;
  z-index: 3;
  top: -75px;
}

.background {
  position: relative;
  z-index: 1
}

<div class="firstimage" style="max-width: 1170px;"><img src="" alt="" title="" style="width: 100%;" max-width="1168" height="399" caption="false" /></div>
<div class="background" style="background-color: #f2e5df;">
<div class="secondimage">
<a href=""> <img src="" alt="" title="" /> </a>
</div></div>
css html javascript
4 Answers

You can't give certain properties of an element different z-index values. However for certain elements like a div you can use ::before and ::after pseudo elements. And you can set a z-index on those, effectively creating three layers. More information here.

In this case you can create a div with the middle img inside. Then add a ::before and ::after to that div. Giving one a background color and a z-index of -1. And the other a background image and a z-index of 1.

In the example below I also added some margin and a border around the inital div so you can better see what is going on.

.image { 
    margin: 20px 0 0 20px;
    position: relative;
    border: 3px solid coral;
    width: 200px;
    height: 300px;
 }

.image::before,
.image::after {
    content: '';
    display: block;
    width: 200px;
    height: 300px;
    position: absolute;
}

.image::before {
    z-index: -1;
    background: cornflowerblue;
    top: 20px;
    left: 20px;
}

.image::after {
    z-index: 1;
    background: url("https://www.fillmurray.com/200/300");
    top: -20px;
    left: -20px;
}
<div class="image"><img src="https://www.fillmurray.com/200/300" /></div>

user_138066520

If I understand right what you're trying to achieve, you probably should be placing the images within background div and placing the second image with position: absolute:

<style>
  .mainRunner {
  position: relative;
}

.firstimage {
  position: relative;
  z-index: 2;
}

.secondimage {
  position: absolute;
  z-index: 3;
  top: 20px; /* use top and left values to place the image exactly where you want it over the first image */
  left: 20px
}

.background {
  position: relative;
  z-index: 1;
  background-color: #f2e5df; 
}
</style>


<div class="mainRunner">
  <div class="background">
    <img src="image1.png" class="firstimage" />
    <img src="image2.png" class="secondimage " />
  </div>
</div>

It sets the background color as the back-most element, then on top of it the secondimage and the firstimage.

user_37702230

Thank everyone for their ideas. In the end the solution was simple. In the style was the double definition of second image. And the first of them was just partly commented. So my first post working right like this:

.secondimage img{
    max-width: 100%;
    height: auto;
    position: relative;
    top: -75px;
    margin: 5px;
        margin-bottom: 10px;
}

Now just need to find out how to close this question... Thank you :)

user_140284900

The answer is simply no... there is no way to address a z-index to specifically a background of an element, z-index and all the other CSS properties work on the entire element, not on only its background.

You're going to have to find another way to do this, have you thought of using a div with not content, and the same size of the image, and then just setting a background color to that specific div?

user_118046690
Related