CSS Image Stitching

Image stitching

Image stitching is a collection of single images.

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

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

Image stitching-simple example

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

navigation images

With CSS, we can display only part of the image we need.

In the following example, the CSS specifies to display part of the image of “img_navsprites.gif”:

Example

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

Example analysis:

  • <img class=”home” src=”img_trans.gif” /> -Because it cannot be empty, the src attribute only defines a small transparent image. The displayed image will be the background image we specified in CSS
  • Width: 46px; Height: 44px;-Define the part of the image we use
  • background:url(img_navsprites.gif) 0 0;-Define the background image and its position (left 0px, top 0px)

This is the easiest way to use image stitching, now we use link and hover effects.

Image flattening-create a navigation list

We want to use a flattened image (“img_navsprites.gif”) to create a navigation list.

We will use an HTML list because it can be linked and it also supports background images:

Example

#navlist{position:relative;}
#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;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

Example analysis:

  • #navlist{position:relative;}-The position is set relative to the position, so that the inside is absolutely positioned
  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}-margin and padding are set to 0, the list style is deleted, and all list items are absolutely positioned
  • #navlist li, #navlist a{height:44px;display:block;}-the height of all images is 44px

Now start the positioning and style of each specific part:

  • #home{left:0px;width:46px;}-The method of positioning to the leftmost side, and the width of the image is 46px
  • #home{background:url(img_navsprites.gif) 0 0;}-define the background image and its position (left 0px, top 0px)
  • #prev{left:63px;width:43px;}-The right positioning is 63px (#home width 46px + some extra space between the items), the width is 43px.
  • #prev{background:url(‘img_navsprites.gif’) -47px 0;}-defines 47px on the right side of the background image (#home width 46px + 1px of the dividing line)
  • #next(left:129px;width:43px;)- Right positioning 129px (#prev 63px + #prev width is 43px + remaining space), width is 43px.
  • #next{background:url(‘img_navsprites.gif’) no-repeat -91px 0;}-Define the right 91px of the background image (#home 46px+1px dividing line + #prev width 43px+1px dividing line)

Image flattening s-hover effect

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

: hover selector for hover effect on the display element of tips: : hover can be applied to all selector elements.

Our new image (“img_navsprites_hover.gif”) contains three navigation images and three images:

navigation images

Because this is a single image instead of 6 separate image files, there will be no delay in loading when the user stays on the image.

We add only three lines of code to add hover effects:

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;}

Example analysis:

  • Since the list item contains a link, we can use: hover pseudo-class
  • #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;}-For all three hover images, we specify the same background position, but each one is down 45px