Background:None VS Background:Transparent What Is the Difference

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.

background: transparent; vs background: 0 0; differences and threats

Practically you will not get any treats by using the property background: 0 0; rather background: transparent
what exactly this background: 0 0 is short hand notation of

background-image: initial;
background-position-x: 0;
background-position-y: 0;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;

Where every background property is set to initial and background position is set to 0 0 and answer for your another question why Less is changing background:transparent to background: 0 0 is IE7 or below doesnt support transparent property so Less is changing it into another shorthand notation which gives the same output

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.

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.

What is the default background color for HTML elements? White or Transparent?

The default background color is transparent.

See here: https://developer.mozilla.org/en/docs/Web/CSS/background-color

Transparent color vs rgba(0,0,0,0)

Behaviour is exactly the same, but transparent is compatible also with IE8.
RGBA is more advanced (but lacks IE8 support) and allows you to quickly modify it, in case you would like an "almost transparent" color, without need to completely change attribute.

For example, it could be very quick to set

background-color: rgba(0,0,0,0.1);

Due to default behaviour of browsers that ignored unrecognized properties, is possible to combine them in order to use new one in newer browsers, but leave a fallback for older ones, simply typing both of them:

background-color: transparent;
background-color: rgba(0,0,0,0);

Or, more useful, in case of alreasy cited almost transparent backgrounds, you can write:

background-color: transparent;
background-color: rgba(0,0,0,0.1);

New browsers will set rgba(0,0,0,0.1) as background, overriding previous transparent declaration, but IE8 will set transparent as background, because it will ignore unrecognized rgba() value, so a slightly different result but in according to Graceful Degradation principle.

What is the difference between background and background-color

Premising that those are two distinct properties, in your specific example there's no difference in the result, since background actually is a shorthand for

background-color  
background-image  
background-position  
background-repeat  
background-attachment  
background-clip  
background-origin  
background-size

Thus, besides the background-color, using the background shorthand you could also add one or more values without repeating any other background-* property more than once.

Which one to choose is essentially up to you, but it could also depend on specific conditions of your style declarations (e.g if you need to override just the background-color when inheriting other related background-* properties from a parent element, or if you need to remove all the values except the background-color).

What is causing background: none to be overriden on a page?

There is an element here:

<div class="off">
    <style>body{background:none!important}</style>
</div>

If you delete this it fixes it.

It's peculiar because the class of 'off' hides this element and yet the style is still applied.

background or background color?

There's no difference about compatibility. The only difference is that using background you could add several properties in the same line, as you probably know, instead of repeating background-color, backgroud-image etc in different lines.

---

Related Topics