How do CSS shorthand declarations reset other properties?

Because the later shorthand is not just a compact way to write the values you can see in its tokens. It sets multiple related longhand properties, and each component omitted from the shorthand is assigned that shorthand’s default value. That can replace an earlier longhand value. [S1]

For example, background-color: red followed by background: url("image.png") no-repeat left top does not keep the red background. The later background shorthand sets the omitted background color to transparent. [S1]

When debugging, look at the declarations in order. Don’t ask only, “Did I write a color?” Ask, “What later shorthand also sets this color, and what value does that shorthand give it?”

Here is the useful comparison. The “after” column means the values after both declarations have been applied in the order shown; it is an explanation of the declarations, not a browser test.

/* Before: only this declaration has been applied */
background-color: red;

/* Later declaration */
background: url("image.png") no-repeat left top;

The first four outcomes follow from the example and shorthand behavior; background-attachment: scroll is an additional reset in the documented background example. [S1] The table does not claim anything about declarations elsewhere in your stylesheet: another applicable declaration could affect what you see. It isolates just these two declarations.

A component does not need to appear as a token for the shorthand to set it. Omitted components receive the shorthand’s default value, so check the shorthand’s full set of affected longhands rather than only the words written in the declaration. [S1]

This is not limited to background. For example, the documented font shorthand resets additional longhands, including font-variant: normal, even when that value is not written as a token. [S1] The practical lesson is to treat shorthand as a group of assignments, not as a selective edit to only the pieces you recognize.

For your own code, first identify the shorthand property, then verify its omitted-component defaults in reliable CSS documentation. The source cited here gives the behavior and examples for background and font; it does not provide every shorthand’s complete reset list or establish what other rules in a particular page will win.

Choose which declaration should own the value. If the red background is intentional, one straightforward edit is to put the color in the later shorthand itself:

background: red url("image.png") no-repeat left top;

Alternatively, keep the declarations but place background-color: red after the shorthand if that is the intended final value. In either approach, inspect the declarations that apply to the element and compare their order. Then confirm the actual result in your browser’s style inspector; this example predicts the two shown declarations only, not every rule in a real stylesheet.

A reusable debugging sequence is: find the affected longhand, locate later shorthands that include it, account for omitted components, and make the intended final value explicit. Avoid adding more declarations at random: first establish which shorthand is resetting the property.