What is the difference between background and background-color

Question

What s the difference between specifying a background color using background and background-color   Snippet  1  body   background-color  blue      Snippet  2  body   background  blue

User · Answer

You can do some pretty neat stuff once you understand that you can play with inheritance with this. However first let's understand something from this doc on background:

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

So when one do:

background: red;

He is setting the background-color to red because red is the last value listed.

When one do:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Red is the background color once again BUT you will see a gradient.

_x000D_

    .box{_x000D_
        border-radius: 50%;_x000D_
        width: 200px;_x000D_
        height: 200px;_x000D_
        background: linear-gradient(to right, grey 50%, yellow 2%) red;_x000D_
    }_x000D_
_x000D_
    .box::before{_x000D_
       content: "";_x000D_
       display: block;_x000D_
       margin-left: 50%;_x000D_
       height: 50%;_x000D_
       border-radius: 0 100% 100% 0 / 50%;_x000D_
       transform: translateX(70px) translateY(-26px) rotate(325deg);_x000D_
       background: inherit;_x000D_
    }

_x000D_

    <div class="box">_x000D_
      _x000D_
     </div>

_x000D_

Now the same thing with background-color:

_x000D_

    .box{_x000D_
        border-radius: 50%;_x000D_
        width: 200px;_x000D_
        height: 200px;_x000D_
        background: linear-gradient(to right, grey 50%, yellow 2%) red;_x000D_
    }_x000D_
_x000D_
    .box::before{_x000D_
       content: "";_x000D_
       display: block;_x000D_
       margin-left: 50%;_x000D_
       height: 50%;_x000D_
       border-radius: 0 100% 100% 0 / 50%;_x000D_
       transform: translateX(70px) translateY(-26px) rotate(325deg);_x000D_
       background-color: inherit;_x000D_
    }

_x000D_

    <div class="box">_x000D_
      _x000D_
     </div>

_x000D_

The reason this happens is because when we are doing this :

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

The last number sets the background-color.

Then in the before we are inheriting from background (then we get the gradient) or background color, then we get red.

User · Answer

background is the shortcut for background-color and few other background related stuffs as below   background-color background-image background-repeat background-attachment background-position    Read the statement below from W3C      Background - Shorthand property To shorten the code  it is   also possible to specify all the background properties in one single   property  This is called a shorthand property       The shorthand property for background is background    body     background  white url  img tree png   no-repeat right top      When using the shorthand property the order of the property values is    background-color background-image background-repeat background-attachment background-position       It does not matter if one of the property values is missing  as long   as the other ones are in this order

User · Answer

With background you can set all background properties like    background-color  background-image  background-repeat background-position etc       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      More info   See Caption  Background - Shorthand property

User · Answer

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

User · Answer

This is the best answer  Shorthand  background  is for reset and DRY  combine with longhand

User · Answer

One thing I ve noticed that I don t see in the documentation is using  background  url  image png    short hand like above if the image is not found it sends a 302 code instead of being ignored like it is if you use   background-image  url  image png

User · Answer

background is shorthand property for the following     - background-color  - background-image  - background-repeat  - background-attachment  - background-position   You can detailed info on every property here  Properties order  In most of browser implementation  i think maybe older browser could present issues  the order of the properties does not matter  except for     background-origin and background-clip  when both of this properties are present  the first one refer to -origin and the second to -clip   Example   background  content-box green padding-box    Is equivalent to    background-origin  content-box  background-color  green  background-clip  padding-box   background-size must always follow background-position and the properties must be separated by   if background-position is composed by two numbers  the first one is the horizontal value and the second the vertical value

User · Answer

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

User · Answer

There s a bug regarding with background and background-color  the difference of this  when using background  sometimes when your creating a webpage in CSS background   fff    can over ride a block of Mask image  top item  text or image    so its better to always use background-color for safe use  in your design if its individual

User · Answer

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

User · Answer

Comparison of 18 color swatches rendered 100 times on a page as small   rectangles  once with background and once with background-color    I recreated the CSS performance experiment and the results are  significantly different nowadays   background   Chrome 54  443    s div   Firefox 49  162    s div   Edge 10  56    s div   background-color   Chrome 54  449    s div   Firefox 49  171    s div   Edge 10  58    s div   As you see - there s almost no difference

User · Answer

The difference is that the background shorthand property sets several background-related properties  It sets them all  even if you only specify e g  a color value  since then the other properties are set to their initial values  e g  background-image to none   This does not mean that it would always override any other settings for those properties  This depends on the cascade according to the usual  generally misunderstood rules   In practice  the shorthand tends to be somewhat safer  It is a precaution  not complete  but useful  against accidentally getting some unexpected background properties  such as a background image  from another style sheet  Besides  it   s shorter  But you need to remember that it really means    set all background properties

User · Answer

They re both the same   There are multiple background selectors  i e  background-color  background-image  background-position  and you can access them either through the simpler background selector or the more specific one  For example   background  blue url  myImage jpg  no-repeat    or  background-color  blue  background-image  url  myImage jpg   background-repeat  no-repeat

User · Answer

There is no difference  Both will work in the same way           CSS background properties are used to define the background effects of     an element           CSS properties used for background effects             background-color      background-image     background-repeat      background-attachment       background-position      Background property includes all of this properties and you can just write them in one line

User · Answer

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 see background   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

User · Answer

I ve noticed when generating emails for Outlook       works   background  gray     does not work   background-color  gray

User · Answer

I ve found that you cannot set a gradient with background-color   This works   background linear-gradient to right  rgba 255 0 0 0   rgba 255 255 255 1      This doesn t   background-color linear-gradient to right  rgba 255 0 0 0   rgba 255 255 255 1

[css] What is the difference between background and background-color

Examples related to css

Examples related to background

Examples related to background-color