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
  • 5,814
  • 6
  • 22
  • 48
Avraam Mavridis
  • 8,288
  • 18
  • 73
  • 125
  • 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,214
  • 16
  • 25
  • 35
  • 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,344
  • 7
  • 32
  • 57