CODEWITHSUNDEEP
csshtmlimage
1x2x3x4x
1x2x3x4x

Reputation: 604

Image won't show up html + css

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">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</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 ?

Upvotes: 0

Views: 94

Answers (1)

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

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

Upvotes: 2

Related Questions