Need HELP with Multiple body backgrounds

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;}

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

Start your pages with one of

<body id="this">
<body id="that">
<body id="theother">

then in the CSS you can have:

body#this {background-image:url(one.png);}
body#that {background-image:url(two.png);}
body#theother {background-image:url(three.png);}
body {background-repeat:no-repeat; background-position: center; background-attachment: fixed;}

That means that you only need one stylesheet, and each page will only download the relevant background image.

DOH! of course… haha Why didn’t I see that!

Thanks!