Is there a difference between these two CSS properties:
background: none; background: transparent;
- Are they both valid?
- Which one should be used and why?
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.
transparent are the defaults.
One explicitly sets the
none and implicitly sets the
transparent. The other is the other way around.
As aditional information on @Quentin answer, and as he rightly says,
background CSS property itself, is a shorthand for:
background-color background-image background-repeat background-attachment background-position
That’s mean, you can group all styles in one, like:
background: red url(../img.jpg) 0 0 no-repeat fixed;
This would be (in this example):
background-color: red; background-image: url(../img.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0;
So… when you set:
you are saying that all the background properties are set to none…
You are saying that
background-image: none; and all the others to the
initial state (as they are not being declared).
background-color: initial; background-image: none; background-repeat: initial; background-attachment: initial; background-position: initial;
Now, when you define only the color (in your case
transparent) then you are basically saying:
background-color: transparent; background-image: initial; background-repeat: initial; background-attachment: initial; background-position: initial;
I repeat, as @Quentin rightly says the
none values in this case are the same, so in your example and for your original question, No, there’s no difference between them.
But!.. if you say
background:red then yes… there’s a big diference, as I say, the first would set all properties to
none/default and the second one, will only change the
color and remains the rest in his
So in brief:
Short answer: No, there’s no difference at all (in your example and orginal question)
Long answer: Yes, there’s a big difference, but depends directly on the properties granted to attribute.
Upd1: Initial value (aka
Initial value the concatenation of the initial values of its longhand properties:
background-image: none background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties background-clip: border-box background-color: transparent
background descriptions here
Upd2: Clarify better the
To complement the other answers: if you want to reset all background properties to their initial value (which includes
background-color: transparent and
background-image: none) without explicitly specifying any value such as
none, you can do so by writing: