Sunday, July 17, 2022

[FIXED] Why doesn't my .gif display on my browser?

Issue

I am just trying to add an animated gif to a webpage and then animate it with CSS, but it does not seem to be displaying on the screen when testing it. I have tried it on Chrome, Safari and Firefox but had luck.

 <!DOCTYPE html>
    <html>
    <head>
        <style type="text/css">
        body {

          background-color: #230190;

        }
          .wofly {
            background-image:url("img/sprite_002.gif");
            width:100px;
            height:100px;
            position:absolute;
          }
        </style>
    </head>

    <body>

    <div class= "wolfy"></div>

    </body>
</html>

It should just display in the <div> like the png's I had been using to animate with before.


Solution

actually you have problem with spelling

.wolfy {
  background-image:url("https://codeproject.global.ssl.fastly.net/images/animated.gif");
  width:100px;
  height:100px;
}
<div class="wolfy"></div>



Answered By - Ismail Farooq
Answer Checked By - David Marino (PHPFixing Volunteer)

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.