2

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?

Ankit Agrawal
  • 6,034
  • 6
  • 25
  • 49
Avraam Mavridis
  • 8,698
  • 19
  • 79
  • 133
  • 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) – benomatis May 08 '14 at 12:27
  • use :after in #logo it creates a pseudo-element. – Priya jain May 08 '14 at 12:36

2 Answers2

0

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.

ElGavilan
  • 6,610
  • 16
  • 27
  • 36
  • are you sure about that? have a read https://developer.mozilla.org/en-US/docs/Web/CSS/content – benomatis May 08 '14 at 12:25
  • It's been my experience at least. I've tried using `content` in Firefox before and I can't get it to work with images. – ElGavilan May 08 '14 at 12:30
0

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;
}
benomatis
  • 5,536
  • 7
  • 36
  • 59