I use the following code on my page:

<div id="itemstable" class="item_type1">
...other divs here...

And in my CSS file I have this code:

.item_type1 div {
	background-image: url(images/type1.giff);

the problem is there are a lot of different item types so I will need to have a lot of lines in my CSS file. I was wondering how to apply the background-image: url(images/type1.giff); style to the nested divs without assigning it to each one. eg. I want to change the code for the "itemstable" div so that it applies a css rule to the nested divs.

Is this possible?

you can have same class for all the divs. and use class selector.


continuing DangerDev's advised.

if you just need to apply the same style rule over a nested divs', then you could try this instace in your CSS file:

.item_type1, .item_type1 div, .item_type1 div div /* applies the same backgroud on the div that is inside the class(item_type1) div */, .item_type1 div div div /* apply more combination of classes+selectors... */ {
background-image : url(images/type1.gif); }

looks like everyone is giving me the same answer, which involves me putting the background URL's in the CSS file which I dont want, I want something like this:

<div id="itemstable" style="SET BACKGROUND IMG FOR NESTED DIVS HERE">
...other divs here...

EDIT: figured it out, I forgot i could set the style in the <head /> section.

Just leave the divs transparent. As long as you don't specify a background, they will show the background under them.

Be careful putting images under text. Many people have trouble reading that.

I might be wrong but i think you can style the div and put a backround image in it.
I didnt have time to test it yet.

Style Sheet

background:url('YOUR GRADIENT IMAGE.gif') repeat-x;
height: 30%;
width: 50%;
margin: 0 auto;