CODEWITHSUNDEEP
cssbackground-color
ralbatross
ralbatross

Reputation: 2488

Why does background-color:none not override a specified background color?

My goal is for all cells in a table to have a background color except ones with the class 'transparent'. Here is some sample code (corresponding jsfiddle):

<style>
    td { background-color: red }
    td.transparent { background-color: none }
</style>

<table>
    <tr>
        <td>foo</td>
        <td class="transparent">bar</td>
    </tr>
</table>

Why doesn't the td.transparent cell follow the td.transparent css rule? When I inspect the element the rule is there, but it is getting overridden by the td rule, which seems to break normal css specificity rules.

I can get what I want by using rgba(0,0,0,0) instead of none, but rgba is not supported in IE8 and I would like to avoid using an ugly hack if I could.

I'd also like to simply understand why this isn't working the way I expected.

Thoughts?

Upvotes: 35

Views: 74997

Answers (5)

Vivens Ndatinya
Vivens Ndatinya

Reputation: 154

Another alternative is to reset the property to the value from the parent element (inherit) or to the default value set by the browser for the property (initial)

In my particular case where I needed to override the background color, background-color: initial; is what fixed the issue.

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240938

None isn't a valid color, instead use transparent.

jsFiddle demo

td.transparent {
    background-color: transparent;
}

Alternatively, you could also use the following:

The reason this works is because it is stating there should be no background in general. It is not referring to a specific color as in the first example.

td.transparent {
    background: none;
}

jsFiddle using this method.

As a side note, usage of CSS3 colors (rgba) is not 100% supported. Reference here: http://caniuse.com/css3-colors

In addition, I would like to say that all of this could be avoided if you didn't set an inital background-color in the first place. There would then be no reason to overwrite the original style if this were the case.

Upvotes: 14

Danield
Danield

Reputation: 125473

For what it's worth: you could replace background-color:none with background: none and it will work.

Upvotes: 23

showdev
showdev

Reputation: 29168

The proper syntax (for CSS2.1) is:

background-color:transparent;

http://www.w3.org/TR/CSS2/colors.html#propdef-background-color

Upvotes: 3

Explosion Pills
Explosion Pills

Reputation: 191749

The value needs to be a valid color, and none is not a valid color. Instead you can use transparent (similar to rgba(0,0,0,0) but more widely supported). If that's no good you can always go with white or use a more specific rule for the red background instead.

Upvotes: 64

Related Questions