Building a Dynamic Banner with CSS Sprites

As I said in the previous section, creating a dynamic banner using a CSS sprite is indeed a simple process that can be performed with minor hassles. Basically, we will create a single background image that contains the respective stages of the banner in question.

To clarify this process, below I included a reduced version of the background image that I'm going to use with the sample banner. It looks like this:

Having at our disposal the above background image, creating the CSS styles that implement the sprite is as simple as this:

<style type="text/css">
  body{
     padding: 0;
     margin: 0;
     background: #fff;
  }

  h1{
     font: bold 24px Arial, Helvetica, sans-serif;
     color: #000;
     text-align: center;
  }

  #bannercontainer{
      width: 400px;
      height: 100px;
      padding: 0;
      margin-left: auto;
      margin-right: auto;
      background: #eee;
      border: 1px solid #000;
  }

  #bannercontainer a{
      display: block;
      width: 400px;
      height: 100px;
      padding: 0;
      background:#eee url(banners.jpg) 0 0 no-repeat;
  }

  #bannercontainer a:link,a:visited{
      background:#eee url(banners.jpg) 0 0 no-repeat;
  }

  #bannercontainer a:hover{
      background:#eee url(banners.jpg) -400px 0 no-repeat;
  }
</style>

That's was really easy, wasn't it? As you can see, the above CSS declarations are really simple to grasp. All they do is change the position of the previous background image at each stage of the link where the banner will be included. Similar to the rollover example that you learned in the first part of the series, this case implements the same logic.

Now do you realize the neat functionality provided by CSS sprites in different situations? I bet you do!

Okay, at this point I'm pretty sure that you grasped the logic that stands behind using a CSS sprite for creating the prior sample banner. However, the CSS code that corresponds to the previous example looks rather disconnected, since it hasn't been attached to the respective structural markup.

Therefore, in the course of the section to come, I'm going to show you the complete source code that implements this simple CSS sprite-based banner. You can quickly copy it and paste it into your favorite text editor.

As usual, to see how the full code of this dynamic banner looks, click on the link below and keep reading.