CSS Backgrounds
CSS Backgrounds — Style elements with CSS backgrounds: colors, images, gradients, positioning, and advanced effects. The guide walks through Background Color, Background Images, Background Position and Size, Gradient Backgrounds, Advanced Background Effects. The background-color property fills the element's background (content + padding area): .element { background-color: #6366f1; } .element { background-color: transparent; } /* Default */ Practical patterns: .card { background-color: white; padding: 1.5rem; border-radius: 8px; } .callout { background-color: #eef2ff; border-left: 4px solid #6366f1; padding: 1rem; } .striped li:nth-child(odd) { background-color: #f9fafb; } Use background-image to add images to elements: .element { background-image: url("image.jpg"); } Multiple backgrounds: .element { background-image: url("overlay.png"), url("main-bg.jpg"); /* First image is on top */ } Controlling the image: .hero { background-image: url("hero.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; /* Parallax effect */ } /* Shorthand */ .hero { background: url("hero.jpg") center/cover no-repeat fixed; } Repeat options:… The guide is organized into 5 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is.