1

If I have:

background:#A2A2A2 url('./images/img.png') repeat-x left bottom;

and then I use:

background:#000000; /* not to confuse with 'background-color' */

Do background-image,background-repeat and background-position are lost?

ajax333221
  • 11,436
  • 16
  • 61
  • 95
  • If your second line is not setting `background-color`, what is it setting? – ThinkingStiff Dec 31 '11 at 06:13
  • @ThinkingStiff: It *is* setting `background-color`. The comment is cautioning the reader not to confuse the shorthand `background` property with the `background-color` property. – BoltClock Dec 31 '11 at 06:14
  • @ThinkingStiff, it is indeed setting background-color, but it is doing more than just changing the bg-color – ajax333221 Dec 31 '11 at 06:16
  • @ajax333221 I guess I'm asking: Why not use `background-color` so it doesn't overwrite the other properties? But I guess your question isn't asking how to solve that problem, just whether it overwrites them. – ThinkingStiff Dec 31 '11 at 06:17
  • @ThinkingStiff actually, I was actually hoping it removes the other properties. – ajax333221 Dec 31 '11 at 06:22

1 Answers1

6

background-image, background-repeat and background-position (among other things) will be implicitly set to their default values when you leave them out in the shorthand property. It's just how a shorthand property works (for the most part).

The computed background styles end up looking something like this:

background-color: #000000;  /* Your specified value */
background-image: none;     /* Default value */
background-repeat: repeat;  /* Default value */
background-position: 0% 0%; /* Default value */

So yes, those values you set in the first shorthand declaration will be lost.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356