title: Why is CSS content image not displaying?
body: <p>Consider this html:</p>
  
  <pre><code>&lt;div class="logo-b"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>div.logo-b {
      content: url(http://placehold.it/350x150);
      height: 150px;
      border: 1px solid darkred;
  }
  </code></pre>
  
  <p>I am trying to display an image using CSS. The image is not being displayed.  Please see this <a href="http://jsfiddle.net/Iamnota12345/20tenm6a/" rel="nofollow">jsfiddle</a> to see what I mean.  What am I missing please?</p>
  
  <p>EDIT: It appears that Chrome renders the fiddle as I provided it above fine, but Firefox (which I use) does not.  If I add <code>:before</code> or <code>:after</code> to the class name in my CSS the image displays in Firefox.  Could someone shed some light on why this would be please?</p>
  
  <p>EDIT: I am using the wrong construct to place the image on my page.  In the context of what I am doing I should use the <code>&lt;img&gt;</code> html tag.  The CSS <code>content</code> construct uses <code>:before</code> and/or <code>after</code> to place content, including images, but I understand these are used in specific contexts. I simply want to display a logo.</p>