Stylesheet Help

[mcmuney]

I'm using a stylesheet that has an image within it. What I'd like to do is display a different image in different pages, while all other formatting is the same. Right now, I'm having to replicate the full code below and renaming it. For example, replicate it using #nav2.. nav3, etc. But I need to do this for many pages and it creates unnecessary codes on the css file and increases the file size. What's my alternative in doing this?

 

#nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 252px;
  padding-top: 292px;
  background: url(images/pic_1.jpg) no-repeat; //I'M REFERRING TO THIS IMAGE
}
#nav ul {
  background: bottom right #991111 url(images/nav_bot.jpg) no-repeat;
  margin: 0 7px 0 28px;
  padding: 5px 20px 15px 20px;
}
#nav li {
  list-style: none;
  background: bottom left url(images/dots.jpg) repeat-x;
}
#nav a {
  color: #FDE7C2;
  font: 18px "times new roman", serif;
  font-style: italic;
  background: #991111;
  padding-right: 8px;
}

[Hybride]

#nav1,#nav2,#nav3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 252px;
  padding-top: 292px;
}

#nav1 {  background: url(images/pic_1.jpg) no-repeat; }
#nav2{  background: url(images/pic_2.jpg) no-repeat; }
#nav3{  background: url(images/pic_3.jpg) no-repeat;}

 

Like that. You can always group the ids/classes together, and change the rest in their own sections.