my background url for css property is not displaying image sprite?-CodePudding

I'm getting the image from w3schools and I'm practicing using image sprites. I don't know what I'm doing wrong. I tried creating an image sprite with an image tag and a div tag, but neither option is working. I don't know if my path is wrong, but I have my image sprite in a folder called "images" and have my website in my desktop folder. Here is my html code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <img src="images/img_navsprites.gif" /> <br></br>
    <img id="home" src="img_trans.gif" alt="home" />
    <div  alt="img"></div>
  </body>
</html>

Here is my css code:

#home {
    width: 46px;
    height: 44px;
    background-image: url("images/img_navsprites.gif");
    background-position: 0 0;
}


.img {
    width: 46px;
    height: 44px;
    background-image: url("images/img_navsprites.gif") 0 0;
}

Is this image considered an image sprite?

Here is my file structure:

CodePudding user response：

Don't apply a background-image to an img tag, as you do it for your #home image

Make all those elements empty divs or spans in the HTML code, to which you apply the background sprite image, and use according background-position values to make the desired part of the sprite image visible.

CodePudding user response：

To answer a couple of your questions: "Is this image considered an image sprite?" I would say yes. Multiple smaller images composed together in a single image. A sprite is useful for reducing network calls to pull a single image instead of multiple images smaller ones.

You generally won't use an <img> tag to display a sprite. Sprites will be used as background images. The usage within the <div ... is more accurate as you are applying a background-image with CSS.

The Width and Height of your background image should represent the width and height of the smaller image within the sprite. You also need a background position to tell the browser where to start rendering with width and height.

The background-position CSS element is slightly misleading. It does start at 0,0 which is the top left corner of the sprite. However, from there the values go negative instead of positive.

To render the first house in the sprite, you have the background-position and width and height correct in the #home element, but you need to move the background-position to the .img element. The <div ... is the one proper way of utilizing a sprite.

It should look something like:

<style>
        .img {
            width: 46px;
            height: 44px;
            background-image: url("images/img_navsprites.gif");
            background-position: 0 0;
        }
</style>

<div ></div>

I also mentioned earlier about the background-position goes negative instead of positive. This means, for example, if I wanted to render the Bottom Right Arrow for instance you would apply negative X axis to the position and a negative on the Y axis as well.

That would look something like:

<style>
        .img {
            width: 46px;
            height: 44px;
            background-image: url("images/img_navsprites.gif");
            background-position: -91px -45px;
        }
</style>