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?

Recommended Answers

All 5 Replies

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;
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.