Images appear on chrome, but not on firefox

Question

Images appear fine on Chrome and Safari, but they don't appear on Firefox! would appreciate help

Here's my code:

HTML:

<div class="clearearlanding"></div>

CSS:

div.clearearlanding {
  content: url('/images/clearearlandingpage.png');
  margin-left: -70px;
  width: 120%;
}

which versions are you using? mention please on your question. That will be helpful to give answer — SkyWalker, Feb 27 '16 at 14:53
Possible duplicate of [Content url does not display image on firefox browser](http://stackoverflow.com/questions/17907833/content-url-does-not-display-image-on-firefox-browser) — denmch, Feb 27 '16 at 15:09
This was already answered [here](http://stackoverflow.com/questions/17907833/content-url-does-not-display-image-on-firefox-browser) — lowmatic, Feb 27 '16 at 15:26

LarsW · Answer 1 · 2016-02-27T15:23:12.573

content is only supposed to be used on pseudo-elements (:before and :after).

It can only be used with the pseudo elements :after and :before.
(According to CSS-Tricks)

Somehow, it works on normal elements too, but only in WebKit-Browsers like Chrome and Safari, as you noticed.

But only works on webkit browsers like chrome and safari.
(According to George Nava on CSS-Tricks)

Solutions

Some simple solutions:

Use :before:

CSS:

div.clearearlanding:before {
  content: url('/images/clearearlandingpage.png');
  margin-left: -70px;
  width: 120%;
}

Use an img tag (although you probably had your reasons to not use that):

CSS:

div.clearearlanding > img {
  margin-left: -70px;
  width: 120%;
}

HTML:

<div class="clearearlanding">
  <img src="https://placeholdit.imgix.net/~text?txtsize=48&txt=512%C3%97256&w=512&h=256" />
</div>

Or use background-image on either .clearearlanding or its :before element.