HELP! Multiple body Background images per page

Hello,
I am trying to place different background images on multiple pages. I am using:

HTML / Body {background: url(image goes here) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

Code (markup):

The problem I am facing is that I need to have MANY stylesheets to reference each pages background. So, I will have a separate stylesheet for each page I have a different image (because the background images are referenced from the HTML or Body tags). I tried to create a wrapping div, but I can't get the height 100% (the height will vary, so I can't specify that).

Any suggestions on how I can change backgrounds per style, rather than having a ton of stylesheets with different images? Make sense??

 

You could use Javascript to dynamically change the background image on each separate page? Here is an example:

<script type="text/javascript">
var background = "images/back1.jpg";
document.body.style.background='url('+background')';
</script>

Code (markup):

 

Getting error. How would I apply style?

 

http://www.codebelly.com/javascript/backimagechange.html

Same principle.

 

Got it!

Just going to add classes to body tag!

DOH! of course.. haha