How do I resize an image in a pseudo-element?

Question

I'm trying to do some tricks with pseudo-element.

I'm showing a ranking and I want a crown to show on top of the winner, tilted 45 degrees in the corner of the box where the image will be. But the image is too big, is there a way for me to resize an image that is added on a pseudo-element?

I have only this div:

<div class='box'></div>

With this CSS:

.box {
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid #000;
    position:absolute;
    top: 100px;
    left: 100px;
}

.box::after{
    content: url(URL_OF_IMAGE);
    position: absolute;
    top: -10px;    
    right: -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

I made an example on JSFiddle: http://jsfiddle.net/GEtds/

I tried altering height and width but to no effect.

Possible duplicate: http://stackoverflow.com/questions/8977957/can-i-change-the-height-of-an-image-in-css-before-after-pseudo-elements — showdev, Oct 08 '13 at 17:31

score 6 · Answer 1 · answered Oct 08 '13 at 17:35

6

You can do it by setting the image as background-image, in combination with background-size: cover; this will let you control the size of the image by setting the width and height on the pseudo-element. You'll also need to add content: ""; to ensure the pseudo-element is rendered.

Here's a jsFiddle

CSS

.box::after {
    display: block;
    content: "";
    background-image: url(http://www.clker.com/cliparts/9/5/e/b/12428065451316964828Simple_crown_icon.svg.med.png);
    background-size: cover;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

answered Oct 08 '13 at 17:35

Mathijs Flietstra

12,900
3
38
67

I like this solution. Less reliance on potentially memory-hogging transforms ([which don't seem to play nice with SVG on IE anyway](http://caniuse.com/#search=transform)). – kmgdev Feb 26 '14 at 17:11
draw-back of this solution is you can't traverse the parent element, or it will appear cut-off. – Nadia Dec 06 '22 at 20:58

vals · Accepted Answer · 2013-10-08T18:25:14.853

5

Since you are already using transforms, go a step further. Use them to move and rescale the image:

.box::after{
    content: url(http://www.clker.com/cliparts/9/5/e/b/12428065451316964828Simple_crown_icon.svg.med.png);
    position: absolute;
    top: -10px;
    right: -10px;
    width: 0.1em;
    height: 0.1em;
    -webkit-transform: translateY(-35px) rotate(45deg) scale(0.2);
    -moz-transform: translateY(-35px) rotate(45deg) scale(0.2);
}

updated fiddle

edited Oct 08 '13 at 18:25

answered Oct 08 '13 at 18:19

vals

61,425
11
89
138

Nice! Missing a closing parenthesis after the `-moz-transform`. – showdev Oct 08 '13 at 18:21
@showdev Thanks ! I missed that in the copy-paste .. As you can guess, I am using Chrome. – vals Oct 08 '13 at 18:26
I'm gonna accept your answer as correct, but could you help me further? In my code it doesn't even show, and I'm not sure why. http://jsfiddle.net/FdT7N/2/ – Rodrigo Sasaki Oct 08 '13 at 18:56
1

You can not have pseudo elements on an image. Use the container div instead. http://jsfiddle.net/FdT7N/3/ – vals Oct 08 '13 at 19:12

How do I resize an image in a pseudo-element?

2 Answers2