Is background-color:none valid CSS?

Question

Can anyone tell me if the following CSS is valid?

.class {
    background-color:none;
}

Nightdress

The validator can often answer this sort of question. – Bourdon

You may be confused with background:none;, which is valid, and which sets the background color to transparent. – Shalloon

Answer 1

You probably want transparent as none is not a valid background-color value.

The CSS 2.1 spec states the following for the background-color property:

Value: <color> | transparent | inherit

<color> can be either a keyword or a numerical representation of a colour. Valid color keywords are:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow

transparent and inherit are valid keywords in their own right, but none is not.

Armoury

Yes. Since the initial value is transparent, that is what you use if you want to turn background coloring "off". – Shalloon

none of these will reset to a previous value (ie if set by another css rule :( – Duroc

@Duroc in your case, you need to give background-color: transparent !important; – Unreason

This reminds me of trying to use font-color when I first got going with coding. Of course it's color, not font-color. Makes so much sense whenever ever other font property has font in front of it... – Victuals

@Unreason But still as pstanton said, setting background color transparent would override the previous css properties! Is there any way to remove this background colour property such that it takes the CSS property from the previous one? – Sculpt

element.style.backgroundColor = ""; – Skate

Answer 2

No, use transparent instead none . See working example here in this example if you will change transparent to none it will not work

use like .class { background-color:transparent; }

---

Where .class is what you will name your transparent class.

Preoccupation

In my example it's complete opposite. If you change none to transparent it will not work. I really need to use none: jsfiddle.net/BkAad – Ellipticity

In your example, change to body *:not(.exception){ background-color:transparent } You must remove the !important as that is forcing all the others inside to have that property. And on the inside li(s) rather use the background-color property than the background's one for background color alone. – Fung

Answer 3

The answer is no.

Incorrect

.class {
    background-color: none; /* do not do this */
}

Correct

.class {
    background-color: transparent;
}

background-color: transparent accomplishes the same thing what you wanted to do with background-color: none.

Paronym

Answer 4

CSS Level 3 specifies the unset property value. From MDN:

The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.

Unfortunately this value is currently not supported in all browsers, including IE, Safari and Opera. I suggest using transparent for the time being.

Ordonnance

Hey, unset has since become fully supported in all browsers that aren't IE! – Landlord

Answer 5

.class {
    background-color:none;
}

This is not a valid property. W3C validator will display following error:

Value Error : background-color none is not a background-color value : none

transparent may have been selected as better term instead of 0 or none values during the development of specification of CSS.

Fermi

And this repeats what James said two and a half years ago, but in a non-cut and pasteable format. ;^) – Woodcutter

Answer 6

So, I would like to explain the scenario where I had to make use of this solution. Basically, I wanted to undo the background-color attribute set by another CSS. The expected end result was to make it look as though the original CSS had never applied the background-color attribute . Setting background-color:transparent; made that effective.

Arondell

I'm finding that background:transparent is not working for me to override a background color being set by another css. If I choose background:red; for example - that will work. But background:transparent; is allowing the other css background color to remain. Any ideas how to stop that? – Acrid

Answer 7

write this:

.class {
background-color:transparent;
}

Yepez

Please explain your code and how it helps to solve the problem! - From Review – Gwen

Ok. background-color is a css attribute and like every css attribute can have some valid and non valid value. valid value for background-color can be one of the below format: #5f9 or #56f293 or transparent. transparent means you want null or none background color. – Yepez

wow - 6 year after the question (and the answer) you answer with a duplicate? – Nightdress