title: CSS set content of element to image
body: <p>I've got the following class, which works in all the major browsers except Firefox for PC. Specifically the issue is with the <code>content</code> being on a regular element—Ffx doesn't seem to like it on anything except a <code>::before</code> or <code>::after</code> pseudo-element. Trouble is, <code>::after</code> does not inherit the size of its base element.</p>
  
  <p>html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;span class="col-3 myImg"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre class="lang-css prettyprint-override"><code>.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 */
  }
  </code></pre>
  
  <p>I don't want to set a height—I want the height to stay proportional to the width (which is determined by <code>col-#</code> from bootstrap v3).</p>
  
  <p>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).</p>
  
  <p>Related SO question: <a href="https://stackoverflow.com/q/8977957/758177">Can I change the height of an image in CSS :before/:after pseudo-elements?</a></p>
  
  <p><a href="http://jsfiddle.net/jshado1/yuSgN/" rel="nofollow noreferrer"><strong>JS Fiddle</strong></a></p>
  
  <p><strong>EDIT</strong> I want the image to be 100% the width of the base element (the span) and the image's height to scale proportionately.</p>