What is CSS Sprites?

1 min

Sponsored Links

CSS Image Sprites

An image sprite is a sum of images placed in a single image.
CSS Sprite is an important CSS feature that allows you to save space and time by gathering together the images that are summoned to the site and making them into a single file. This will reduce the opening speed of your site, which will be useful to you for SEO

First of all, we create a transparent image file with a Photoshop. We save this file as PNG format that we use on our website and appear on every page. It is used for a picture of your theme that is repeated on every page of your website.

How to use CSS Sprite

Prepare some icons or images with the help of Photoshop as a single file which has space between two icons or pics. Save it as PNG file. Or use my image below.

HTML code

Your HTML file must be as shown below. ( Copy paste can be trouble sometimes Here is to download the CSS and HTML file.)

< html>

< head> < title> Learning CSS Sprite < /title>
< /head>
< body>

< div id="sprite_container">
< div class="bestwishes">

< /div>

< div class="frebies">

< /div>

< div class="emailme">

< /div>
< div class="findonface">

< /div>
< div class="instagram">

< /div>
< div class="gmail">

< /div>
< /div>

< /body>
< /html>

CSS code

Instead of struggling with the codes to clarify the positions of image parts, there are couple of websites to help you with it. 

  • Then 1. Select Sprite Tool, 2. Select one of your images, it will automatically select the part of image considering the spaces around, 3. Copy all code.
  • Then, change ".sprite" with the name "bestwishes",
  • If you want to open your website very very fast by reducing the codes, then delete "background: url..." code and add "background-position" like below. And then, the codes must be like below. 

.bestwishes  {
width:  155px;
height:  27px;
background-position:  -34px -33px;}

< style>
.bestwishes, .frebies, .emailme, .findonface, .instagram, .gmail {
background-image: url('https://www.alpinpon.com/wp-content/uploads/2018/01/css-sprite-all-icon.png');
background-repeat: no-repeat;
< /style>


#sprite_container {width:263px; margin:0 auto; }

.bestwishes {
width: 155px;
height: 27px;
background-position: -34px -33px;

.frebies {

width: 210px;
height: 33px;
background-position: -15px -114px;

.emailme {

width: 129px;
height: 125px;
background-position: -298px -156px;

.findonface {

width: 252px;
height: 84px;
background-position: -309px -30px;

.instagram {

width: 80px;
height: 80px;
background-position: -22px -189px;

.gmail {

width: 97px;
height: 68px;
background-position: -122px -196px;
< /stlyle>

Your page will be exactly seen like that

You can move your images independently wherever you want moving its "div".

Like it? Share with your friends!

What's Your Reaction?

Funny Funny
I like that I like that
I like that
Dislike Dislike


Your email address will not be published. Required fields are marked *