Image won't show up html + css - css

Question

I'm trying to put two images (dowload and view) on top of another ones, here's the HTML:
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
<img class="img-responsive" src="123.png">
</div>
<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
<img class="img-responsive" src="123.png">
</div>
<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
<img class="img-responsive" src="123.png">
</div>
<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
<img class="img-responsive" src="123.png">
</div>
Here's the CSS:
.backgrounddownload:after
{
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
background-image: url(dowload.png);
}
.backgroundview:after
{
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 50px;
left: 35px;
background-image: url(view.png);
}
For some reason the second div, in this case the dowload.png won't load, and in chrome while inspecting all the .backgroundview:after is disabled; I guess I can't have two :after, but how can I avoid that ?

Answer 1

You are not setting the container .backgrounddownload position: relative which in that case you are positioning them in relation to the body. Adding position: relative to the container will give you control to your absolute elements.
Add this in your css:
.backgrounddownload {
position: relative;
}
Fiddle
Update
It seems I have misunderstood your question. In that case, instead of having 2 :after you can also use :before.
.backgroundview:before {
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
background: #fff
}
Updated Fiddle