Background: VS background-color. What's the difference?

Question

Background-color:rgb works the way I intended but background:rgb fills up the whole div. Every tutorial I've seen tells me that these two are basically the same just that the shorthand one can have more properties.

Watch this video for reference. https://www.youtube.com/watch?v=10Q5D8kUMQo

Exactly. When you put a color you only specify the background-color and the others will be set as initial. [Check here](https://www.w3schools.com/cssref/css3_pr_background.asp) for more info — Alberto Rhuertas, Nov 19 '19 at 13:00
Already answered here : https://stackoverflow.com/questions/10205464/what-is-the-difference-between-background-and-background-color `background` is super set contains properties of `background-color` `background-image` `background-position` `background-repeat` `background-attachment` `background-clip` `background-origin` and `background-size` — Znaneswar, Nov 19 '19 at 13:04
*Background-color:rgb works the way I intended but background:rgb fills up the whole div* --> what the way you intended? show us the behavior — Temani Afif, Nov 19 '19 at 13:26

Greedo · Answer 1 · 2019-11-21T10:34:06.510

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.

Thank you for this information. While reading the link you posted, I read at the bottom that the properties must in the same order you listed them. But I wrote a background shorthand in a different order and it works exactly the same? why is that? Let me know if I should make a new post with this question or if there is some kind of explanation. — Lazaro, Nov 20 '19 at 20:53

Background: VS background-color. What's the difference?

1 Answers1