Set the width for a pseudo element with image-url content

Question

I have a page which is supposed to be printable. The problem is that the page includes some elements with background-image (and I can't see the images when I print), so I try to create a stylesheet for the printer, with some pseudo elements that will help me to display the images, it looks like:

.pbar-fill {
  background: none !important;
}
.pbar-fill::before {
  content: url("/images/bg-progress-bar-big01.gif") !important;
  position: absolute !important;
  z-index: 1003 !important;
  width: 23px !important;
}

It doesn't go well, as the image always get its full width (220px).

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

Pseudo Elements are just a box containing the generated content. So you can't resize the image inside.

This thread covers all the options pretty thoroughly
Can I change the height of an image in CSS :before/:after pseudo-elements?

The best option seems to be scale the image to what ever suits. But this is probably way to fiddly to implement everywhere.

.pbar-fill::before {
    content: url('image.jpg');
    transform: scale(.5);
}

edited May 23 '17 at 11:59

Community

1
1

answered Jun 14 '13 at 01:52

Allan Hortle

2,435
2
20
22

If this question is a duplicate of another question, you should have flagged it as a duplicate, rather than posting an answer. – cimmanon Mar 22 '16 at 13:53

Set the width for a pseudo element with image-url content

1 Answers1