569

Can anyone tell me if the following CSS is valid?

.class {
    background-color:none;
}
johannchopin
  • 13,720
  • 10
  • 55
  • 101
NarfkX
  • 5,865
  • 2
  • 14
  • 7
  • 12
    The [validator](http://jigsaw.w3.org/css-validator/#validate_by_input) can often answer this sort of question. – thirtydot Jan 05 '12 at 09:33
  • 17
    You may be confused with `background:none;`, which is valid, and which sets the background color to transparent. – Mr Lister Mar 13 '17 at 13:14

7 Answers7

724

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.

mahemoff
  • 44,526
  • 36
  • 160
  • 222
James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • 31
    Yes. Since the _initial value_ is `transparent`, that is what you use if you want to turn background coloring "off". – Mr Lister Jan 05 '12 at 08:46
  • 2
    none of these will reset to a previous value (ie if set by another css rule :( – pstanton Dec 15 '14 at 07:20
  • 2
    @pstanton in your case, you need to give background-color: transparent !important; – herr Jun 23 '15 at 06:08
  • 1
    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... – serraosays Oct 07 '15 at 21:36
  • @herr 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? – SE_User Jan 03 '17 at 13:21
  • element.style.backgroundColor = ""; – Normajean May 12 '21 at 09:03
188

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.
JGallardo
  • 11,074
  • 10
  • 82
  • 96
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • In my example it's complete opposite. If you change none to transparent it will not work. I really need to use none: http://jsfiddle.net/BkAad/ – Hrvoje Golcic May 17 '14 at 09:54
  • 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. – yveslebeau Jul 31 '14 at 08:20
119

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.

Community
  • 1
  • 1
Sajidur Rahman
  • 2,764
  • 1
  • 27
  • 26
17

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.

Gert Hengeveld
  • 2,478
  • 1
  • 18
  • 13
  • 4
    Hey, `unset` has since [become **fully supported**](https://developer.mozilla.org/en-US/docs/Web/CSS/unset) in all browsers that aren't IE! – Brad Turek Sep 14 '20 at 04:56
13
.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.

johannchopin
  • 13,720
  • 10
  • 55
  • 101
Barun
  • 4,245
  • 4
  • 23
  • 29
  • 4
    And this repeats what James said two and a half years ago, but in a non-cut and pasteable format. ;^) – ruffin Jan 07 '15 at 18:50
3

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.

Binita Bharati
  • 5,239
  • 1
  • 43
  • 24
  • 4
    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? – Auxiliary Joel Apr 25 '19 at 03:35
2

write this: 

.class {
background-color:transparent;
}
Abolfazl Miadian
  • 3,099
  • 2
  • 19
  • 15
  • 2
    Please explain your code and how it helps to solve the problem! - [From Review](https://stackoverflow.com/review/low-quality-posts/19714670) – Luca Kiebel May 13 '18 at 14:32
  • 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. – Abolfazl Miadian May 13 '18 at 14:43
  • 3
    wow - 6 year after the question (and the answer) you answer with a duplicate? – NarfkX May 15 '18 at 09:41