Using CSS sprites

HTML & CSS
1

I use this code for embedding an image

<div class="col v-top">
                    <img src="static/example.png" alt="Example">
                        </div>

When using the CSS sprites generator , it gives classes to use

How do I modify the code to use CSS class as image?

1 Like
2

You will have to clarify what you mean as I am not following what you want to do :slight_smile:

If possible a codepen demo or similar would help and then we can work with your code and your images.

It sounds like you have removed an image from the html and turned it into a sprite. If so then you will need to size the element to match your sprite dimensions (same as the original image I guess) and apply the background-position code given to you by the generator (although I have not used the generator so don;t know what you’ve been given exactly).

Be aware that if the image is deemed as content then it should be in the html and not in a sprite.

1 Like
3

For example when I created a sprite with four images as one, it generated the following CSS code:


.example1{
background-position: -400px -250px;
width: 400px;
height: 250px;
}
.example2{
background-position: -400px 0;
width: 400px;
height: 250px;
}
.example3{
background-position: 0 0;
width: 400px;
height: 250px;
}
.example4{
background-position: 0 -250px;
width: 400px;
height: 250px;
}

How do I use a CSS class as an image instead of a link in the following:

<div class="col v-top">
                    <img src="static/example.png" alt="Example">
                        </div>
4

You need to have the image as a background image rather than an inline image. Changing the background position when you have no background isn’t going to change anything.

5

Does that mean I cannot use the sprites as inline images?

6

You just apply the rule to another container and remove the image.

e.g.

<div class="col v-top">
    <div class="example example4"></div>
</div>

It may be possible to apply the background to v-top but as you don’t show the code for that element we can’t tell if it can be used.

You also don’t show the code that displays the actual image so I’m guessing its called something like .example but once again you don’t provide enough information for us to help.

Please read my first post and supply the information in a form that will allow us to help you more easily. What you are asking is one of the simplest things to do in CSS but without code or context we can’t give specific help.

Also note that the main point of using sprites is to remove the unnecessary images from the html and combine them into one big sprite to save loading time. It is not meant for replacing images that should remain in the html as content. Neither is it a method of applying a sprite image to a foreground html image (although that can be done but is complicated and rarely useful).

3 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.