Does this shorthand for background removes the other attributes?

Question

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?

Tiphanie

If your second line is not setting background-color, what is it setting? – Sair

@ThinkingStiff: It is setting background-color. The comment is cautioning the reader not to confuse the shorthand background property with the background-color property. – Lethe

@ThinkingStiff, it is indeed setting background-color, but it is doing more than just changing the bg-color – Tiphanie

@Tiphanie 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. – Sair

@Sair actually, I was actually hoping it removes the other properties. – Tiphanie

Answer 1

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.

Lethe

He is the CSS master... He knows what you're asking before you've asked it. – Earthlight

I am curious about that "(among other things)", what else properties will be lost? – Tiphanie

@ajax333221: There's also background-attachment in CSS2, and a number of others in CSS3: w3.org/TR/css3-background/#the-background – Lethe