CODEWITHSUNDEEP
css
Mindaugo
Mindaugo

Reputation: 87

:after pseudo class doesn't insert background image

When I use :after pseudo class with background image, it doesn't shows in my div. Why does it happen?

P.S. When I apply position:absolute top:0, right:0, I can see the image.

<div class="vienas">abra kadabra</div>

.vienas {
height:200px;
border: 1px solid black;
position: relative;
}

div::after {
content:" ";
background: url(http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg);
width:100px;
height: 100px;
}

Upvotes: 0

Views: 57

Answers (2)

G.L.P
G.L.P

Reputation: 7217

Try like this: Demo

CSS:

div:after {
    content:"";
    background: url("http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg") no-repeat -100px -100px fixed;
    width:100px;
    height: 100px;
    top: 10px;
    right: 5px;
    position: absolute;
    display: inline-block;
}

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128776

By default pseudo-elements are set to display inline. Because of this, your width and height properties will not have any affect on the element and it will instead default to the width and height of the inner content.

You need to set it to display: block instead:

div::after {
  ...
  display: block;
}

JSFiddle demo.

Upvotes: 3

Related Questions