Member Avatar for blamlol

I use the following code on my page:

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

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?

  • 5 Contributors
  • 5 Replies
  • 508 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by stevenpetersen
Member Avatar for DangerDev

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

Member Avatar for essential

Hi,

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); }
Member Avatar for blamlol

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...
</div>

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

Member Avatar for MidiMagic

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.

Member Avatar for stevenpetersen

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

#itemstable
{
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.