Why is my image not loading in Firefox browser but loading on safari / chrome?
I was wondering why my image is not loading in Firefox browser but loading on safari / chrome?
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
top: 15%;
left: 50%;
position: absolute;
margin-left: -150px;
z-index: 10;
}
<div class="shape"></div>
Try it background-image
. Like the Mozilla support page
The CSS content property is used with pseudo-elements
::before
and::after
to create content in an element.
.shape {
border-radius: 25px;
background: #4D5061;
background-image: url('http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg');
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
top: 15%;
left: 50%;
position: absolute;
margin-left: -150px;
z-index: 10;
}
<div class="shape"></div>
Change your CSS to this. Don't use content
for a background image because there is a much easier way to do it. Try using background shrinking instead (you can also just use background-image
).
.shape {
border-radius: 25px;
background: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg) center no-repeat #4D5061;
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
top: 15%;
left: 50%;
position: absolute;
margin-left: -150px;
z-index: 10;
}
<div class="shape"></div>
Historically, the property content
was only defined for pseudo-elements . The current Firefox implementation only supports this use case.
For example,
.foo::before {
content: 'hi';
}
will work. Using real elements as in the question,
.foo {
content: 'hi';
}
does not currently work in Firefox.
Actually, by doing this:
.shape, .shape:after {
content: url('path');
}
Works for Chrome, Firefox and Safari.
First of all, you need to take care of removing the attribute alt
from img
or you will see the value alt
and actual image in Firefox browser.
try it
.shape :: before {content: url ("link");}