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;
}
Frage
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?
Lösung
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;
}
Andere Tipps
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.