How to create simple header image transitions ?

I have a header image and I have few sub-sites ( home, contact, about us, where to find us )

I want 4 different images to change as I click on those links

home - img1.jpg
contact - img2.jpg
aboutus - img3.jpg
where - img4.jpg

the problem is in the css :

/* header photo */
.headerphoto {
   margin: 0 auto;
   width: 770px;
   height: 200px;
   padding: 15px 10px 10px 10px;
   background: #FFF url(headerphoto.jpg) no-repeat center;   
}

Code (markup):

Could someone tell me what is the easiest way to do simple image transitions?

 

you could have each image set to its own class then call that class on each page.
e.g.

.homeimg {background: #FFF url(img1.jpg) no-repeat center;}
.contactimg - {background: #FFF url(img2.jpg) no-repeat center;}
.aboutusimg -{background: #FFF url(img3.jpg) no-repeat center;}
.whereimg - {background: #FFF url(img4.jpg) no-repeat center;}

Code (markup):

and remove it from

.headerphoto {
  margin: 0 auto;
  width: 770px;
  height: 200px;
  padding: 15px 10px 10px 10px;}

Code (markup):

 

Oh, Gosh. Pix582 thank you for your help but my knowledge for CSS is equal to dog's knowledge to speak.
So I have none. I hoped it was an one line where I can change the file path.
Anyways thank you very much! : )

 

I'd have to see the markup, but I'm getting a 'this is bad' tingly from the CSS. (CSS without the markup is gibberish anyways) -- since the entire reason for doing a header image in the CSS is to have images off graceful degradation, and this doesn't seem to have any positioning for gilder-levin type effects... and the image is a massive fixed size... it reeks of 'not viable for web deployment' design.

@pix582's CSS is also broken with dashes for no reason, and wastes time setting values it doesn't have to.

/* header photo */

.headerPhoto {
	margin: 0 auto;
	width:770px;
	height:200px;
	padding: 15px 10px 10px;
	background:#FFF url(img1.jpg) center center no-repeat;
}

.contactImg {
	background-image:url(img2.jpg);
}

.aboutUsImg {
	background-image:url(img3.jpg);
}

.whereImg {
	background-image:url(img4.jpg);
}

Code (markup):

Don't waste time restating values you can just declare once.

Now, I'm guessing wildly, but assuming you don't care about accessibility or the entire reason you're using CSS backgrounds in the first place (which it sounds like you don't) I'd suck it up, rip that code out and use a IMG tag. Otherwise it sounds (again, guessing) like the markup is non-semantic crap that should ALSO be tossed.

But again, I'd have to see the actual markup and CSS for the whole page to weigh in more.