CODEWITHSUNDEEP
htmlcss
Illep
Illep

Reputation: 16851

GIF image not displaying when added via CSS

I want to add a GIF image to my webpage via CSS, the size of the image should be 100px X 100px.

The file structure is as follows:

Folder:
   /index.html
   /car.gif

I have added the JSFiddle of the code. Can someone correct it? The GIF is not getting displayed on index.html:

Code

<html>
  <head>
<style type="text/css">
      #position {
     background-image: url('car.gif'); 
        width: 25px;
        height: 25px;
        position: absolute;

      }
    </style>
  </head>
  <body>
    dd
    <div id="position"></div>

ss
  </body>
</html>

Upvotes: 0

Views: 1809

Answers (3)

Farshad
Farshad

Reputation: 1485

Make sure the file car.gif is exist at the same directory or use absolute url to the image

DEMO

Upvotes: 1

Srinivas08
Srinivas08

Reputation: 1062

I have tested your code in my browser by replacing an image from my desktop and Image was showing up. Once just make a change to its width and height :

width: 25px;
height: 25px;

to 

 width: 100px;
 height: 100px;

Also Once Check this...

Ex : If our Page Url is :

  www.yoursite.com/css/index.php

make sure car.gif can be accessed if you replace index.php with car.gif,

  www.yoursite.com/css/cars.gif

is accessible or not.

Thats nothing but means that that file should be in same folder..

try them and hope you will get results you need..

Upvotes: 1

Crates
Crates

Reputation: 2372

The image (car.gif) must reside in the same directory as the CSS if you do not specify an absolute path. For this reason, the JS fiddle is useless. Check to make sure that your files are in the places you suggested they are in.

You also might benefit from a more explicit background statement, such as:

background: url('car.gif') top left no-repeat transparent;

Moreover, if your image's native size is 100px by 100px, you will need to resize it to see it properly:

background-size: 25px 25px;

I updated the other fiddle to include a more relevant version for your question: http://jsfiddle.net/qtxg2jz5/6/

To answer Astro's comment, I can't comment on posts because I don't have enough reputation yet.

Upvotes: 1

Related Questions