Set background colors with background-color including transparency
Control image tiling with background-repeat (repeat, no-repeat, space, round)
Position backgrounds with background-position using keywords and precise values
Scale backgrounds with background-size (cover, contain, custom dimensions)
Control scroll behavior with background-attachment (scroll, fixed, local)
Set background starting point with background-origin
Control visibility area with background-clip including text clipping
Layer multiple backgrounds for complex visual effects
Use the background shorthand to combine properties efficiently
Introduction to Background Properties
CSS provides comprehensive control over backgrounds through dedicated properties. Each property targets a specific aspect: color, images, positioning, sizing, scrolling behavior, and layering. Master these properties to create sophisticated background designs.
While gradients (covered in the previous lesson) create color transitions, these properties control how any background—color, gradient, or image—is displayed, positioned, and behaves.
background-color - Solid & Transparent
The background-color property sets a solid color behind an element. Use named colors, hex values, RGB, or RGBA for transparency.
/* Named colors */
background-color: white;
background-color: cornflowerblue;
/* Hex values */
background-color: #4CAF50;
background-color: #667eea;
/* RGB and RGBA */
background-color: rgb(102, 126, 234);
background-color: rgba(102, 126, 234, 0.3); /* 30% opacity */
/* Modern color functions */
background-color: oklch(0.7 0.2 250); /* OKLCH color space */
/* Transparent */
background-color: transparent;
background-repeat - Tiling Control
Control how background images tile to fill the element. The default is repeat (tiles in both directions).
/* Standard values */
background-repeat: repeat; /* Tiles horizontally and vertically (default) */
background-repeat: no-repeat; /* Shows once, no tiling */
background-repeat: repeat-x; /* Tiles horizontally only */
background-repeat: repeat-y; /* Tiles vertically only */
/* Advanced values */
background-repeat: space; /* Distributes evenly with spacing */
background-repeat: round; /* Scales to fit exactly, no clipping */
/* Two-value syntax (horizontal vertical) */
background-repeat: repeat no-repeat; /* Horizontal repeat, no vertical */
background-repeat: space round; /* Space horizontal, round vertical */
background-position - Placement Control
Position backgrounds within their container using keywords, percentages, or absolute values. Control horizontal and vertical placement independently.
/* Keyword positioning */
background-position: center; /* Center both axes */
background-position: top right; /* Top-right corner */
background-position: bottom left; /* Bottom-left corner */
/* Percentage positioning */
background-position: 50% 50%; /* Center (same as 'center') */
background-position: 0% 0%; /* Top-left */
background-position: 100% 100%; /* Bottom-right */
/* Absolute positioning */
background-position: 20px 30px; /* 20px from left, 30px from top */
background-position: 2rem 3rem; /* Using rem units */
/* Edge offset syntax (modern) */
background-position: right 20px bottom 30px; /* 20px from right, 30px from bottom */
background-position: left 10% top 15%; /* 10% from left, 15% from top */
/* calc() for complex positioning */
background-position: calc(100% - 20px) calc(100% - 20px);
background-size - Scaling Control
Control how background images are scaled. The two most important values are cover (fills entire area) and contain (fits inside completely).