Can't override background color with "none", only with "inherit"

Question

I was trying to remove the white background from the .win-container elements (the tiles) in a Windows 8 ListView control to let the background show through. When I traced the styles, I could see that the white background was getting applied with the following rule...

.win-listview :not(.win-footprint).win-container

So I wrote my own rule for that like this...

.win-listview :not(.win-footprint).win-container {
    background-color: none;
}

But that didn't work.

A friend helped me figure out that I could use...

.win-listview :not(.win-footprint).win-container {
    background-color: inherit;
}

And that works great. Can anyone tell me why in the world this is so?

Answer 1

none is a value of the background-image property, not background-color. Since it's not a valid value of background-color, the declaration is ignored and the system will continue drawing your tiles with the default white background. If you want to give your tiles a transparent background, you need to use background-color: transparent instead:

.win-listview :not(.win-footprint).win-container {
    background-color: transparent;
}

(You can also use background: none, but again none represents background-image with an implied transparent for background-color.)

background-color: inherit simply tells your tiles to take on (or inherit) the same background color as the ListView containing them. This may or may not have an apparent effect of having no distinct background color. However it is not the same as having a transparent background (unless the ListView itself also has a transparent background, which in your case it probably doesn't).