CODEWITHSUNDEEP
htmlcss
stepheniok
stepheniok

Reputation: 405

Applying css background behind img icon

I am attempting to apply a css background behind an img icon I am importing into my project. When trying to do so the css background that I have applied completely covers the image. I am attempting to have the image set on top of the background to give it a border look.

I've attempted to adjust the z-index but it had no effect. I also attempted to use add a pseudo class but that does not show the css background color I applied.

How can I achieve this?

Here is some code sample:

img {
  height:32px;
  width:32px;
  z-index: 500;
}

.background {
  width:40px;
  height:40px;
  background: blue;
opacity: 0.08;
border-radius: 8px;
}
<div class="background">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>

<div class="">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>

I am expecting the image to sit in the center of the background: blue; I am attempting to apply.

Upvotes: 0

Views: 872

Answers (1)

User123
User123

Reputation: 486

img {
  height:32px;
  width:32px;
  z-index: 500;
  position: absolute;
  left: 12px;
  top: 12px;
}

.background {
  width:40px;
  height:40px;
  background: blue;
  opacity: 0.08;
  border-radius: 8px;
  position: absolute;
}
<div class="background">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>

<div class="">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>

I just set the position to absolute and set the offsets.

Upvotes: 2

Related Questions