How to Use Css sprites in blogger

Hi friends ,in this post I am sharing how to use  css sprites in blogger.Css sprites are used to decrease website load time by combining multiple images into a single image.Because when you upload multiple each time request is made for each images cause more loading time.But when you are using css sprites the request is one time only  for an image.

Copy and paste the below code in blogger post or page.And it is a simple concept I have used just one image and put in a class.Then I have chosen id for different images and just made changes in background-position.If need also use margin to make it perfect.

image

<style>
.sp {
background-image:url(http://4.bp.blogspot.com/-lQXOKEar7x4/UpoQEmD22PI/AAAAAAAACpc/3hDL-_LfZzc/s1600/Untitled-1.png);
background-color: transparent;
background-repeat: no-repeat;
}

#sp1 {
    height:102px;
    width:197px;
    margin-bottom:5px;
    margin-left:-110px;
    background-position:110px ;

}


#sp2 {
    height:104px;
    width:94px;
    margin-bottom:5px;
    background-position:-90px ;
   
}


#sp3 {
    height:104px;
    width:96px;
    margin-bottom:5px;
    background-position:-183px;
}

 

#sp4 {
    height:104px;
    width:90px;
    margin-bottom:5px;
    background-position:-280px;
}</style>

<div><a href="http://google.com/" target= "blank" ><div class="sp" id="sp1"></div></a></div>
<div><a href="http://yahoo.com" target= "blank" ><div class="sp" id="sp2"></div></a></div>
<div><a href="http://facebook.com" target= "blank" ><div class="sp" id="sp3"></div></a></div>
<div><a href="http://bing.com" target= "blank" ><div class="sp" id="sp4"></div></a></div>

In next posts we update more with the css sprites.

Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment