Why would one property be used over the other and vise versa?
In what circumstance would none be used instead of transparent?
They both seem to accomplish/do the same thing.
Yes they both accomplish the same thing but for slightly different reasons.
The property 'background’ is a shorthand property. It does not just refer to the background-color. It refers to background-image, background-repeat, background-position and so on…
When you say background:none then the value none only applies to a background-image as that is the only property in the shorthand that uses none. So you are saying I don’t want an image. However because that is the only value you passed in the shorthand all the other values in the shorthand return to their defaults which for a background-color would be transparent.
Therefore when you say background:none you are indirectly setting the background color to transparent simply because you did not specify it and it returns to default. When you say background:transparent then the reverse is true and you reset the background-image to none because you didn’t specify it and it reverts to its default.
That’s why you need to take care with shorthand properties. If you only want to affect one property then you would say.
background-color:transparent;
or
background-image:none
However when you understand the shorthand you can simply say background:none and get rid of them all in one go if that’s what you wanted.
A lot of beginners set up a background image and then say something like background:red and wonder where the image has gone. If they said background-color:red then the image would still be there as well.
If you are using the shorthand then background:none is less characters but when you look at the stylesheet you may think that it refers to a previous image and you end up looking back to see if there was an image specified somewhere. If you say background:transparent then you can tell by looking that it probably applied to a background-color.
The result is the same. The choice is up to you.
3 Likes
Would it be accurate to say that using background:none; uses less gpu than background:transparent;?
No. They both do the same thing.
It may indeed be that background-color:transparent is more efficient because it doesn’t have to check every other single background property.
Background:none has less characters which means that the loading of the css file may be fractionally quicker if you had written it in ten thousand places but once the file is loaded then the background-color:transparent would likely be the one that is less intensive on the css parser because it only deals with one property value.
All this is really speculation and probably not measurable for real world cases.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.