Use sprite image in css

CSS Sprites

CSS sprites technique is a way to reduce the number of HTTP requests made for image resources, by combining images in a single file.

What is a Sprite

Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates.

To display a single image from the combined image, you could use the CSS background-position property, defining the exact position of the image to be displayed.

Advantage of Using CSS Image Sprite

A web page with many images, particularly many small images, such as icons, buttons, etc. can take a long time to load and generates multiple server requests.

Using the image sprites instead of separate images will significantly reduce the number of HTTP requests a browser makes to the server, which can be very effective for improving the loading time of web pages and overall site performance.

Note: Reducing the number of HTTP requests has the major impact on reducing response time that makes the web page more responsive for the user.

Checkout the following examples and you will see one visible difference; when you place the mouse pointer over the browser icons in non-sprite version for the first time the hover image will appear after some time, it happens because the hover image is loaded from the server on mouse hover, since the normal and hover images are two different images.

Whereas in sprite version, since all images are combined in a single image the hover image is displayed immediately on mouse hover that results in smooth hover effect.

Using CSS sprite technique demonstrated in the: [EXAMPLE — B]; we were able to reduce the number of HTTP requests by 9 and the total file size of the image(s) by 38.2 KB as compared to the [EXAMPLE — A];. That’s a pretty huge improvement for such a small example. Imagine what you could do on a complete website.

The whole process of creating this example is explained below.

Making the Image Sprite

We made this sprite image by combining 10 separate images in a single image (mySprite.png). You can create your own sprite using any image editing tool you like.

Tip: For the sake of simplicity, we have used all icons of same size, and place them closely to each other for easy offset calculation.

Display an Icon from Image Sprite

Finally, utilizing CSS, we can display just the part of an image sprite we need.

First of all, we will create the class .sprite that will load our sprite image. This is to avoid repetition, because all items share the same background-image.

Example

Now, we must define a class for each item we want to display. For example, to display Internet Explorer icon form the image sprite the CSS code would be.

Example

Now the question arises, how did we get those pixel values for background-position ? Let’s find out. The first value is the horizontal position, and second is the vertical position of background. As the upper-left corner of Internet Explorer icon touches the left edge so its horizontal distance from the starting point i.e. top-left corner of the image sprite is 0, and since it is placed on the 5th position so its vertical distance from the starting point of image sprite is 4 X 50px = 200px , because height of each icon is 50px.

To show the Internet Explorer icon we have to move its upper-left corner to the starting point i.e. top-left corner of image sprite (mySprite.png). Also, since this icon is placed at the vertical distance of 200px, we will need to shift the whole background-image (mySprite.png) vertically up by 200px, which requires us to apply the value as a negative number that is -200px, because the negative value makes it go vertically up whereas a positive value would move it down. However, it doesn’t require a horizontal offset, since there are no pixels before the upper-left corner of the Internet Explorer icon.

Tip: Just play around with the value of background-position property in the upcoming examples and you will quickly learn how the offsets work.

Creating a Navigation Menu Using CSS Image Sprite

In the previous section we have learned, how to display an individual icon from an image sprite. This is the easiest way to use image sprites, now we are going one step ahead by building a navigation menu with rollover effect as demonstrated in [EXAMPLE — B].

Here we will use the same sprite image (mySprite.png) to create our navigation menu.

Foundation HTML for Navigation

We will start by creating our navigation menu with an HTML unordered list.

Example

Applying the CSS on Navigation

The following sections will describes you how to convert the simple unordered list given in example above to a spite image based navigation using the CSS.

Step 1: Resetting the List Structure

By default, HTML unordered lists are displayed with bullets. We’ll need to remove the default bullets by setting the list-style-type attribute to none .

Example

Step 2: Setting Common Properties for Each Links

In this step we will set all the common CSS properties that all links are going to share. Such as, color , background-image , display , padding , etc.

Example

Step 3: Setting Default State of Each Links

Now, we must define a class for each menu item, because every item in the image sprite has different background-position . For example, Firefox icon is placed at the starting point i.e. top-left corner of the image sprite, so there is no need to shift the background-image. Hence the vertical and horizontal position of the background in this case would be 0. Similarly, you can define background-position for other icons within the image sprite.

Example

ul.menu li.firefox a < background-position: 0 0; >ul.menu li.chrome a < background-position: 0 -100px; >ul.menu li.ie a < background-position: 0 -200px; >ul.menu li.safari a < background-position: 0 -300px; >ul.menu li.opera a

Step 4: Adding Hover States of Links

Adding hover states owns the same principle as adding the above links. Just move their upper-left corner to the starting point (i.e. top-left corner) of the image sprite as we have done above. You can simply calculate the background-position using the following formula:

Vertical position of hover state = Vertical position of normal state — 50px

As rollover images are just below the default state and height of each icon is equal to 50px. The hover state of icons also doesn’t require a horizontal offset, since there are no pixels before the upper-left corner of them.

Example

ul.menu li.firefox a:hover < background-position: 0 -50px; >ul.menu li.chrome a:hover < background-position: 0 -150px; >ul.menu li.ie a:hover < background-position: 0 -250px; >ul.menu li.safari a:hover < background-position: 0 -350px; >ul.menu li.opera a:hover

Done! Here is our final HTML and CSS code after combining the whole process:

Источник

CSS Image Sprites

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

Image Sprites — Simple Example

Instead of using three separate images, we use this single image («img_navsprites.gif»):

With CSS, we can show just the part of the image we need.

In the following example the CSS specifies which part of the «img_navsprites.gif» image to show:

Example

• — Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
• width: 46px; height: 44px; — Defines the portion of the image we want to use
• background: url(img_navsprites.gif) 0 0; — Defines the background image and its position (left 0px, top 0px)

This is the easiest way to use image sprites, now we want to expand it by using links and hover effects.

Image Sprites — Create a Navigation List

We want to use the sprite image («img_navsprites.gif») to create a navigation list.

We will use an HTML list, because it can be a link and also supports a background image:

Example

#navlist li margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
>

#navlist li, #navlist a height: 44px;
display: block;
>

#home left: 0px;
width: 46px;
background: url(‘img_navsprites.gif’) 0 0;
>

#prev left: 63px;
width: 43px;
background: url(‘img_navsprites.gif’) -47px 0;
>

#next left: 129px;
width: 43px;
background: url(‘img_navsprites.gif’) -91px 0;
>

• #navlist — position is set to relative to allow absolute positioning inside it
• #navlist li — margin and padding are set to 0, list-style is removed, and all list items are absolute positioned
• #navlist li, #navlist a — the height of all the images is 44px

Now start to position and style for each specific part:

• #home — Positioned all the way to the left, and the width of the image is 46px
• #home — Defines the background image and its position (left 0px, top 0px)
• #prev — Positioned 63px to the right (#home width 46px + some extra space between items), and the width is 43px
• #prev — Defines the background image 47px to the right (#home width 46px + 1px line divider)
• #next — Positioned 129px to the right (start of #prev is 63px + #prev width 43px + extra space), and the width is 43px
• #next — Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider)

Image Sprites — Hover Effect

Now we want to add a hover effect to our navigation list.

Tip: The :hover selector can be used on all elements, not only on links.

Our new image («img_navsprites_hover.gif») contains three navigation images and three images to use for hover effects:

Because this is one single image, and not six separate files, there will be no loading delay when a user hovers over the image.

We only add three lines of code to add the hover effect:

Example

#home a:hover <
background: url(‘img_navsprites_hover.gif’) 0 -45px;
>

#prev a:hover background: url(‘img_navsprites_hover.gif’) -47px -45px;
>

#next a:hover background: url(‘img_navsprites_hover.gif’) -91px -45px;
>

• #home a:hover — For all three hover images we specify the same background position, only 45px further down

Источник

Implementing image sprites in CSS

Image sprites are used in numerous web apps where multiple images are used. Rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of HTTP requests is reduced.

Note: When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests.

Implementation

Suppose an image is given to every item with class toolbtn :

.toolbtn  background: url(myfile.png); display: inline-block; height: 20px; width: 20px; > 

A background position can be added either as two x, y values after the url() in the background, or as background-position . For example:

#btn1  background-position: -20px 0px; > #btn2  background-position: -40px 0px; > 

This would slide the starting point of the background image for the element with the ID btn1 20 pixels to the left and the element with the ID btn2 40 pixels to the left (assuming they have the class toolbtn assigned and are affected by the image rule above).

Similarly, you can also make hover states with:

#btn:hover  background-position: px px; > 

See also

Found a content problem with this page?

This page was last modified on May 29, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник