0

I've got the following class, which works in all the major browsers except Firefox for PC. Specifically the issue is with the content being on a regular element—Ffx doesn't seem to like it on anything except a ::before or ::after pseudo-element. Trouble is, ::after does not inherit the size of its base element.

html

<span class="col-3 myImg"></span>

css

.col-3 {
    width:    25%;
}

.myImg {
  /* content:    url('img.png'); works in everything by Ffx on PC */
  display:    block;
  position:   relative;
}
/* v Needed for Ffx on PC */
.myImg::after {
  background: red;
  content:    url('img.png');
  display:    block;
  max-width:  100%; /* affects only the background colour */
  position:   absolute;
  width:      100%; /* affects only the background colour */
}

I don't want to set a height—I want the height to stay proportional to the width (which is determined by col-# from bootstrap v3).

I don't want to use a bunch of image tags because that means an update will require a bunch of edits (instead of one central one to the css).

Related SO question: Can I change the height of an image in CSS :before/:after pseudo-elements?

JS Fiddle

EDIT I want the image to be 100% the width of the base element (the span) and the image's height to scale proportionately.

Community
  • 1
  • 1
Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126
  • Why are you putting an image as the background of a pseudo element using CSS? That just sounds like a jarbled mess. – Cody Guldner Jul 31 '13 at 19:15
  • @CodyGuldner, from my question/post: *I don't want to use a bunch of image tags because that means an update will require a bunch of edits (instead of one central one to the css).* – Jakob Jingleheimer Jul 31 '13 at 19:16
  • 1
    so you want the image to have 100% width and stay proportional in height? – omma2289 Jul 31 '13 at 19:29
  • @koala_dev, Yes, I want the image to size to be 100% of the width of the base element and I want its height to scale proportionately. – Jakob Jingleheimer Jul 31 '13 at 20:49
  • I don't think that's possible using the content porperty – omma2289 Jul 31 '13 at 21:27
  • @koala_dev, is there another way to do it without the content property? (proportional height and a width equal to the width of the base element) – Jakob Jingleheimer Jul 31 '13 at 21:59
  • 1
    Not that I can think of, you may look into a Javascript solution but of course the easiest thing would be to just use the tag, I know you want a centralized place for future updates, so maybe you can have a constant in PHP where you save the image url? – omma2289 Jul 31 '13 at 22:06

0 Answers0