Overlay background image of div over image that was loaded through js - html

Question

I am trying to overlay an image in a div ontop of another image from the <img>. My code right now is:
<div class="something">
<img class="pp" src="get_pp()" />
<div class="img1"></div>
</div>
get_pp() is a Js function that gives me the img url before the page loads. And my css:
#pp {
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
}
#img1 {
background-image: url("../images/img_name.png");
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
z-index:300;
}
Unfortunately setting the z-index doesn't work. Any help would be appreciated!

Answer 1

Your error probably has something to do with the fact that you have your elements identified with class names in your HTML, but defined as IDs in your CSS.
Change CSS to:
.pp {
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
}
.img1 {
background-image: url("../images/img_name.png");
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
z-index:300;
}
Try this for starters.

Answer 2

First thing you have used class instead of id
so change
.pp {
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
}
.img1 {
background-image: url("../images/img_name.png");
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
z-index:300;
}
Second use image here instead of get_pp() etc.
Demo here