The background-color property in CSS is used to specify the background color of an element. On the other hand, if you only use “Background:” Property, you can either specify it's valued as an image URL or as a color code or specify the value of each background property in the below-given order.
Description. The Background Color information is stored for image and photo files that have a color specified for the image background. The background color is, in most cases, displayed in the form of an RGB triplet or a hexadecimal code.
In a background property you can add background-color , repeat , no-repeat and other image attributes, but in the background-image property you are only allowed to add image. Show activity on this post. By using background, you need to specify other argument to set the background of the page.
Background-color values can be expressed as named colors such as white, black, and red. Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.
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
).
background
will supercede all previous background-color
, background-image
, etc. specifications. It's basically a shorthand, but a reset as well.
I will sometimes use it to overwrite previous background
specifications in template customizations, where I would want the following:
background: white url(images/image1.jpg) top left repeat;
to be the following:
background: black;
So, all parameters (background-image
, background-position
, background-repeat
) will reset to their default values.
About CSS performance :
background
vs background-color
:
Comparison of 18 color swatches rendered 100 times on a page as small rectangles, once with background and once with background-color.
While these numbers are from a single page reload, with subsequent refreshes the render times changed, but the percent difference was basically the same every time.
That's a savings of almost 42.6ms, almost twice as fast, when using background instead of background-color in Safari 7.0.1. Chrome 33 appears to be about the same.
This honestly blew me away because for the longest time for two reasons:
- I usually always argue for explicitness in CSS properties, especially with backgrounds because it can adversely affect specificity down the road.
- I thought that when a browser sees
background: #000;
, they really seebackground: #000 none no-repeat top center;
. I don't have a link to a resource here, but I recall reading this somewhere.
Ref : https://github.com/mdo/css-perf#background-vs-background-color
With background
you can set all background
properties like:
background-color
background-image
background-repeat
background-position
With background-color
you can just specify the color of the background
background: url(example.jpg) no-repeat center center #fff;
VS.
background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;
(See Caption: Background - Shorthand property)
One of the difference:
If you use a image as background in this way:
background: url('Image Path') no-repeat;
then you cannot override it with "background-color" property.
But if you are using background to apply a color, it is same as background-color and can be overriden.
eg: http://jsfiddle.net/Z57Za/11/ and http://jsfiddle.net/Z57Za/12/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With