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 - A 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

<style>
    img.home {
        width: 46px;
        height: 44px;
        background: url(/demos/img_navsprites.gif) 0 0;
    }
</style>
<body>
    <img class="home" src="/demos/img_trans.gif">
</body>

Try It! 
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; - Defines the part of the image we are using

  • 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

<style>
    #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('/images/img_navsprites.gif') 0 0;}
    #prev{left:63px;width:43px;}
    #prev{background:url('/images/img_navsprites.gif') -47px 0;}
    #next{left:129px;width:43px;}
    #next{background:url('/images/img_navsprites.gif') -91px 0;}
</style>
<body>
    <ul id="navlist">
      <li id="home"><a href="/"></a></li>
      <li id="prev"><a href="/css/"></a></li>
      <li id="next"><a href="/css/"></a></li>
    </ul>
</body>

 Try It! 

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 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 is 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 - Hover Effect

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

lamp

: hover selector - for effects when hovering on the display element

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

<style>
    #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_hover.gif') 0 0;}
    #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
    #prev{left:63px;width:43px;}
    #prev{background:url('img_navsprites_hover.gif') -47px 0;}
    #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
    #next{left:129px;width:43px;}
    #next{background:url('img_navsprites_hover.gif') -91px 0;}
    #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
<body>
<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>

Try It! 

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 moved down 45px.