Separating body

I have hundreds of divs, each of which have their own style properties in it. Just a few minutes ago, I discovered that I have to change a lot of things just to change some background of the page. I want the background of the body, starting from 0px to 200px, to have a black background, the background of the body from 200px to 500px to have a gray background and from 500px to 700px to have a black background again. Finally, 700px to ...px should have a white background. T开发者_Go百科o be precise,

body
{
background-color:#ADADAD;
}

makes all of the page, including the bottom of the page (which I wanted to be white) gray. Is there anyway to separate the body px to px?

As Daniel pointed out, the best approach (as I'm sure you're trying to avoid having to add even more divs, is by creating a picture 1px in height and 700px in width. Use the following style to implement your image on your background:

body{background: url(your-image-here.jpg) repeat-y;}

This will repeat your image vertically, recreating your color seperation without having to create more divs.

EDIT: as you mentionned, depending on the category, you could implement a unique class on your body tag in your css file. In this case, for each different categories, you could have a different image to load. Since the image is very small in size (a few kB at the most), it wouldn't be very heavy on the server or the users to download images for each category. (this is better than trying to stretch your images to fit your needed dimensions).