Definition
CSS properties for setting background colors and images behind content.
Why It Matters
Backgrounds provide visual hierarchy, group elements, and improve user interface clarity while maintaining performance.
Core Concepts
background-color/background-image: Fill and image behind content.- Background Properties:
repeat,position,attachment,size(cover,contain),clip,origin. - Shorthand:
backgroundcan set color, image, position, size, and repeat in one declaration — but explicit longhand aids debugging layered backgrounds.
.hero-section {
background-color: #f4f4f4;
background-image: url('landscape.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}