CSS Background Properties

CSS background properties control how backgrounds appear on elements, including colors, images, gradients, size, position, and layering.

Background Basics

The background-color property sets a solid color background using any valid color value.

The background-image property adds images or gradients to element backgrounds.

Background images layer on top of background colors, providing fallback if images fail to load.

/* Solid background */\nbody {\n  background-color: #f0f0f0;\n}\n\n/* Background image with fallback color */\n.hero {\n  background-color: #333;\n  background-image: url('hero.jpg');\n}\n\n/* Gradient background */\n.gradient {\n  background-image: linear-gradient(to right, #ff0000, #0000ff);\n}