DIV images doesn't show in Firefox

Question

I have two animated .gif images in my webpage, but they are not being displayed in Firefox. It works on IE, Safari and Chrome. I have read other posts but I couldn't find a solution that works. Could someone help please?

This is the url: http://www.lokalbericht.unibe.ch

Following is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lokalbericht - Hermann Burger</title>
<style type="text/css">
.text_body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
body {
    background-color:#000000;
    background-image:url(images/intro/background_paper.jpg);
    background-position:center 50px;
    background-repeat:no-repeat;
    background-attachment:fixed;

}
div.soon {
    content:url(images/intro/coming_soon.gif);
    position: relative;
    width:650px;
    height:170px;
    top:350px;
    left:30%;
}

div.lokalbericht {
    content:url(images/intro/animation.gif);
    width:160px; 
    height:20px;
    position: absolute;
    top:300px;
    left:45%;

}
</style>
</head>

<body>

<div class="soon"> &nbsp;</div>
<div class="lokalbericht">&nbsp;</div>

`content:url(images/intro/animation.gif);` - why not just set it as the background image, using `background:url()` — Nick R, Jun 20 '14 at 12:11

score 0 · Answer 1 · answered Jun 20 '14 at 12:14

I checked your link. Try this...

div.soon {
background-image:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht {
background-image:url(images/intro/animation.gif);
width:160px; 
height:20px;
position: absolute;
top:300px;
left:45%;
}

score 0 · Answer 2 · answered Jun 20 '14 at 12:15

0

Try this :

content: css property which you have set for load background image is creating problem so just replaced it with background-image into both given class div.soon ,div.lokalbericht

 background-image:url(images/intro/coming_soon.gif);
 background-image:url(images/intro/animation.gif);

In place of :

content:url(images/intro/coming_soon.gif);

I hope this helps you!!

answered Jun 20 '14 at 12:15

Deepak Goswami

2,030
1
16
22

I am glad to here that i could help you. you can vote up my answer as well. :) – Deepak Goswami Jun 23 '14 at 04:34

Suresh Ponnukalai · Answer 3 · 2014-06-20T12:30:12.070

Firefox doesn't support the content property in the same way as Chrome — on img elements and/or when the source is an image.

So you need to use background property instead of content or you need to use :before property the classes like below.

div.soon:before {
content:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}

div.lokalbericht:before {
content:url(images/intro/animation.gif);
width:160px; 
height:20px;
position: absolute;
top:300px;
left:45%;

}

DIV images doesn't show in Firefox

3 Answers3