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

Question

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?

Diondione

none is not a valid property value for background-color. It is for background-image, however, thus the shortcut background: none will work. – Celestina

Answer 1

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.

Periwig

not an answer for most cases including mine – Skidmore

@Skidmore this answer is 10 years old at this point; do you have a link to a question whereby this answer doesn't work for your use case? – Periwig

Answer 2

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

Lakeishalakeland

Answer 3

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.

Simonides

Answer 4

The proper syntax (for CSS2.1) is:

background-color:transparent;

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

Bittern

Answer 5

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.

Glossa