Is Background-Color:None Valid CSS

Is background-color:none valid CSS?

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.

how to remove standard background color of text in a div

Text doesnt have a default background-color, it might be being set somewhere else in your CSS, use a property inspector in a browser to check which styles are applied

            body {              background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');            }                        .header-pris,.header-pris-2 {                text-align:center;            }
            .header-pris-2 p {                background-color: white;            }

<body>  <div class="container">    <div class="header-pris">      <h1>Pris alternativ:</h1>      <p>Skulle du vilja pröva enstaka timmar eller kanske tom mer timmar än vad som anges nedan så går det självklart också att annordna, kontakta oss direkt på         <a href="mailto:info@vanorden.se"> info@mail.se</a></p>    </div>
    <div class="header-pris-2">      <h1>Pris alternativ:</h1>      <p>Skulle du vilja pröva enstaka timmar eller kanske tom mer timmar än vad som anges nedan så går det självklart också att annordna, kontakta oss direkt på         <a href="mailto:info@vanorden.se"> info@mail.se</a></p>    </div>  </div>
</body>

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

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.

background:none vs background:transparent what is the difference?

There is no difference between them.

If you don't specify a value for any of the half-dozen properties that background is a shorthand for, then it is set to its default value. none and transparent are the defaults.

One explicitly sets the background-image to none and implicitly sets the background-color to transparent. The other is the other way around.

Trying to turn off background color

Tack on !important to get the rule to stick:

body {  background-color: #000 !important;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<body>  <div>Test</div></body>

Could `currentBackgroundColor` become a valid, useful CSS color value keyword?

Yes it could. For example, it would make it very easy to create an section of your text inverted-colour, ie you could swap the foreground and background colours to highlight something.

However, suggesting this as a CSS feature would be fighting against the tide. There used to be a whole bunch of CSS colour keywords, for things like the scrollbar colour, and the standard button colour, and the colours of the 3D shadows on the buttons... but they were all dropped from CSS some time ago.

There are lots of things in CSS that could be useful that aren't in there. Personally I'm more excited about CSS variables. When they become mainstream we are unlikely to be too worried about colour keywords like this

CSS Inherit for unknown Background Color is Actually Transparent

Setting background-color: inherit does cause it to take the background colour of the parent element.

The reason it is taking transparent is because the background colour of the parent (the li) is transparent (the default value).

The only other element in your second JSFiddle which has a background colour set is #unknown_background, which is the anchor's great-great-grandparent.

Add div, ul, li { background-color: inherit; } to the end of your stylesheet and the background will be inherited all the way down and the border will not show up.

Is Background-Color:None Valid CSS