Firefox does not show the logo while Chrome does

Question

I have the following css:

 #logo{
    content: url(../images/logo.svg) 0 0 no-repeat;
    background-color: black;
    margin-top: 30px;
    height: 20px;
    width: 100px;
  }
  #logo-container{
    background-color: black;
    margin-top: 0px;
    height: 65px;
    width: 100px;
  }

with that html:

<div class="col-md-1 col-md-offset-1 col-xs-3 ">
                <div id="logo-container"><a id="logo" href="#firstpage" data-target="start" title="EPIC Companies"></a></div>  
            </div>

Chrome shows the logo correctly, while the Firefox show a black rectangle (only the container). What I am doing wrong?

Answer 1

content can only be used in pseudo-elements like :after or :before.

So use it this way:

#logo:after {
    content: url(../images/logo.svg) 0 0 no-repeat;
    background-color: black;
    margin-top: 30px;
    height: 20px;
    width: 100px;
}

Answer 2

Firefox has limited support for the content attribute, specifically, it can't be used with images.

You'll probably have to use an <img> tag.

EDIT: According to the linked duplicate question, it looks like it actually will work in Firefox if you use it with the :before and :after pseudo-attributes.