CSS3 added support for multiple background images. Which declaration uses the correct syntax for applying two background images to the same element?

CSS3 added support for multiple background images. Which declaration uses the correct syntax for applying two background images to the same element?

• A. background: url("images/logo.png"), url("images/pattern.png");
• B. background-image: url("images/logo.png"), url("images/pattern.png")
• C. background-image: url("images/logo.png"); url("images/pattern.png");
• D. background-image: url("images/logo.png"), url("images/pattern.png");

Answer: (D)

Multiple backgrounds are defined by listing image URLs separated by commas. Each URL represents a layer, and they stack from bottom to top in the order you write them. The declaration that uses the background-image property with two URLs separated by a comma shows the exact, explicit way to apply two different background images to one element, ending with a semicolon to terminate the declaration. This approach is clear and portable, and it lets you add or adjust the individual layers (like their positions or sizes) later if needed. The shorthand form can achieve the same result, but using background-image is the most precise way to specify multiple backgrounds.