Reputation: 53606
I have a general rule which gives all DIVs a background image.
I have one div (with id='a') which I don't want it to have the background image.
What css rule do I have to give it?
Upvotes: 213
Views: 400636
Reputation: 2711
HTML :
<div id="a" class="mydiv"></div>
CSS:
div#a {
background-image:none;
}
Another Way:
div:not(#a) {
//all rules goes here
//add image here
//div with id a not effected by these rules
}
Multiple (not pseudo)
div:not(#a):not(#b):not(#c) {
//all rules goes here
//add image here
//div with ids not effected with these rules
}
Upvotes: 1
Reputation: 31
When background-image: none !important;
have no effect.
You can use:
background-size: 0 !important;
Upvotes: 3
Reputation: 91
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #fff));
background-image: -webkit-linear-gradient(center top, #fff 0%, #fff 50%);
background-image: -moz-linear-gradient(center top, #fff 0%, #fff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-image: linear-gradient(to bottom, #fff 0%, #fff 50%);
for older browsers.. if you have defined css in some framewokrk.css like select2.css in IE9 background-image: -webkit-gradient etc. and you want it via another .css rewrite with "background-image: none !important" not works. I used same color to color gradient like page background color.
Upvotes: 2
Reputation: 1967
Replace the rule you have with the following:
div:not(#a) { // add your bg image here //}
Upvotes: 0
Reputation: 81
Since in css3 one might set multiple background images setting "none" will only create a new layer and hide nothing.
http://www.css3.info/preview/multiple-backgrounds/ http://www.w3.org/TR/css3-background/#backgrounds
I have not found a solution yet...
Upvotes: 8
Reputation: 311
div#a {
background-image: url('../images/spacer.png');
background-image: none !important;
}
I use a transparent spacer image in addition to the rule to remove the background image because IE6 seems to ignore the background-image: none
even though it is marked !important
.
Upvotes: 19
Reputation: 2037
Doesn't this work:
.clear-background{
background-image: none;
}
Might have problems on older browsers...
Upvotes: 0
Reputation: 4457
If your div rule is just div {...}
, then #a {...}
will be sufficient. If it is more complicated, you need a "more specific" selector, as defined by the CSS specification on specificity. (#a being more specific than div is just single aspect in the algorithm.)
Upvotes: 1
Reputation: 96626
div#a {
background-image: none !important;
}
Although the "!important" might not be necessary, because "div#a" has a higher specificity than just "div".
Upvotes: 34