Backgrounds are essential for creating visually appealing web pages. CSS provides powerful tools for working with background colors, images, gradients, and even multiple layered backgrounds. Understanding these properties lets you create everything from simple colored backgrounds to complex, dynamic visual effects.
Background Color
The background-color property sets the background color of an element. It accepts any valid CSS color value.
/* Using different color formats */
.element {
background-color: red; /* Named color */
background-color: #3498db; /* Hex */
background-color: rgb(52, 152, 219); /* RGB */
background-color: rgba(52, 152, 219, 0.5); /* RGBA with transparency */
background-color: hsl(204, 70%, 53%); /* HSL */
background-color: transparent; /* Transparent */
}
/* Practical examples */
.header {
background-color: #2c3e50;
color: white;
}
.highlight {
background-color: rgba(255, 235, 59, 0.3); /* Semi-transparent yellow */
}
.card {
background-color: #ffffff;
}Background Color Examples
Background Image
The background-image property sets one or more background images for an element.
/* Single background image */
.element {
background-image: url('image.jpg');
}
/* Multiple background images (layered) */
.element {
background-image:
url('foreground.png'),
url('background.jpg');
}
/* Gradient as background image */
.element {
background-image: linear-gradient(to right, #667eea, #764ba2);
}
/* Combining image and gradient */
.element {
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('photo.jpg');
}Background Image Examples
Background Image Properties
Several properties control how background images are displayed:
Background Image Properties
| Property | Values | Description |
|---|---|---|
background-image | url(), gradient | Sets the background image |
background-size | cover, contain, 100px, 50% | Controls image size |
background-position | center, top left, 50% 50% | Sets image position |
background-repeat | repeat, no-repeat, repeat-x | Controls image repetition |
background-attachment | scroll, fixed, local | Sets scrolling behavior |
Background Size
The background-size property controls the size of background images.
/* Keyword values */
.element {
background-size: cover; /* Scale to cover entire element */
background-size: contain; /* Scale to fit within element */
background-size: auto; /* Original size */
}
/* Length values */
.element {
background-size: 200px; /* Width 200px, height auto */
background-size: 200px 100px; /* Width 200px, height 100px */
}
/* Percentage values */
.element {
background-size: 100%; /* Full width, height auto */
background-size: 50% 50%; /* 50% width and height */
}Background Size Values
cover vs contain: cover scales the image to completely cover the element (may crop), while contain scales the image to fit entirely within the element (may show empty space).
Background Position
The background-position property sets the starting position of a background image.
/* Keyword values */
.element {
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: top left;
background-position: bottom right;
}
/* Percentage values */
.element {
background-position: 50% 50%; /* Center */
background-position: 0% 0%; /* Top left */
background-position: 100% 100%; /* Bottom right */
}
/* Length values */
.element {
background-position: 20px 30px; /* 20px from left, 30px from top */
}
/* Mixed values */
.element {
background-position: center top;
background-position: right 20px bottom 10px;
}Background Position Values
Background Repeat
The background-repeat property controls how background images are repeated.
/* Repeat options */
.element {
background-repeat: repeat; /* Default: repeat both directions */
background-repeat: no-repeat; /* Don't repeat */
background-repeat: repeat-x; /* Repeat horizontally only */
background-repeat: repeat-y; /* Repeat vertically only */
background-repeat: space; /* Repeat with spacing */
background-repeat: round; /* Repeat and stretch to fit */
}Background Repeat Values
Linear Gradients
Linear gradients create a smooth transition between colors along a straight line. They're created using the linear-gradient() function.
Basic Linear Gradient Syntax
/* Basic syntax */
.element {
background-image: linear-gradient(direction, color1, color2, ...);
}
/* Simple two-color gradient */
.element {
background-image: linear-gradient(to right, red, blue);
}
/* Multiple colors */
.element {
background-image: linear-gradient(to bottom, red, yellow, green);
}
/* Using angles (0deg = up, 90deg = right, 180deg = down, 270deg = left) */
.element {
background-image: linear-gradient(45deg, purple, orange);
background-image: linear-gradient(135deg, #667eea, #764ba2);
}Linear Gradient Directions
to right
linear-gradient(to right, #667eea, #764ba2)to bottom
linear-gradient(to bottom, #667eea, #764ba2)45deg
linear-gradient(45deg, #667eea, #764ba2)135deg
linear-gradient(135deg, #667eea, #764ba2)Color Stops
You can control where colors transition using color stops (percentages or lengths):
/* Color stops with percentages */
.element {
background-image: linear-gradient(
to right,
red 0%,
yellow 50%,
green 100%
);
}
/* Hard color transitions (no gradient) */
.element {
background-image: linear-gradient(
to right,
red 0%,
red 33%,
yellow 33%,
yellow 66%,
green 66%,
green 100%
);
}
/* Uneven distribution */
.element {
background-image: linear-gradient(
to right,
red 0%,
yellow 80%, /* Yellow dominates */
green 100%
);
}Even Color Stops
linear-gradient(to right, #e74c3c 0%, #f39c12 50%, #27ae60 100%)Hard Transitions (Stripes)
linear-gradient(to right, #e74c3c 0%, #e74c3c 33%, #f39c12 33%, #f39c12 66%, #27ae60 66%, #27ae60 100%)Uneven Distribution
linear-gradient(to right, #e74c3c 0%, #f39c12 80%, #27ae60 100%)Popular Linear Gradients
Purple Dream
linear-gradient(135deg, #667eea 0%, #764ba2 100%)Pink Sunset
linear-gradient(to right, #f093fb 0%, #f5576c 100%)Ocean Blue
linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%)Pastel Dream
linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%)Peach
linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)Sky Blue
linear-gradient(to right, #4facfe 0%, #00f2fe 100%)Radial Gradients
Radial gradients radiate outward from a central point in a circular or elliptical pattern.
/* Basic radial gradient */
.element {
background-image: radial-gradient(red, blue);
}
/* Circle shape */
.element {
background-image: radial-gradient(circle, red, blue);
}
/* Ellipse shape (default) */
.element {
background-image: radial-gradient(ellipse, red, blue);
}
/* Size keywords */
.element {
background-image: radial-gradient(closest-side, red, blue);
background-image: radial-gradient(farthest-side, red, blue);
background-image: radial-gradient(closest-corner, red, blue);
background-image: radial-gradient(farthest-corner, red, blue);
}
/* Position */
.element {
background-image: radial-gradient(circle at top left, red, blue);
background-image: radial-gradient(circle at 20% 30%, red, blue);
}Circle Radial
radial-gradient(circle, #667eea, #764ba2)Ellipse Radial
radial-gradient(ellipse, #667eea, #764ba2)Positioned Circle
radial-gradient(circle at top left, #667eea, #764ba2)Multi-Color Radial
radial-gradient(circle, #667eea 0%, #764ba2 50%, #f093fb 100%)Creative Radial Gradients
Creative Radial Gradient Effects
Conic Gradients
Conic gradients transition colors around a central point (like a pie chart).
/* Basic conic gradient */
.element {
background-image: conic-gradient(red, yellow, green, blue, red);
}
/* With starting angle */
.element {
background-image: conic-gradient(from 90deg, red, yellow, green, blue, red);
}
/* With position */
.element {
background-image: conic-gradient(at 20% 30%, red, blue);
}
/* Color stops for pie chart effect */
.element {
background-image: conic-gradient(
red 0deg,
red 90deg,
yellow 90deg,
yellow 180deg,
green 180deg,
green 270deg,
blue 270deg,
blue 360deg
);
}Conic Gradient
conic-gradient(#667eea, #764ba2, #f093fb, #667eea)Pie Chart
conic-gradient(from 90deg, red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg, blue 360deg)Rotated Conic
conic-gradient(from 45deg, #667eea, #764ba2, #667eea)Repeating Conic
repeating-conic-gradient(#667eea 0deg 30deg, #764ba2 30deg 60deg)Repeating Gradients
CSS provides repeating versions of all gradient types for creating patterns.
/* Repeating linear gradient */
.element {
background-image: repeating-linear-gradient(
45deg,
#667eea 0px,
#667eea 10px,
#764ba2 10px,
#764ba2 20px
);
}
/* Repeating radial gradient */
.element {
background-image: repeating-radial-gradient(
circle,
#667eea 0px,
#667eea 10px,
#764ba2 10px,
#764ba2 20px
);
}
/* Repeating conic gradient */
.element {
background-image: repeating-conic-gradient(
#667eea 0deg 30deg,
#764ba2 30deg 60deg
);
}Repeating Gradient Patterns
Multiple Backgrounds
CSS allows you to layer multiple backgrounds on a single element. They're stacked from top to bottom (first declared is on top).
/* Multiple background images */
.element {
background-image:
url('foreground.png'),
url('midground.png'),
url('background.jpg');
background-position:
center,
center,
center;
background-size:
auto,
cover,
cover;
background-repeat:
no-repeat,
no-repeat,
no-repeat;
}
/* Gradient overlays on images */
.element {
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('photo.jpg');
background-size: cover;
}
/* Multiple gradients */
.element {
background-image:
linear-gradient(45deg, transparent 49%, red 49%, red 51%, transparent 51%),
linear-gradient(-45deg, transparent 49%, red 49%, red 51%, transparent 51%),
linear-gradient(to bottom, #667eea, #764ba2);
}Multiple Background Layers
💡 Layering Order:
When using multiple backgrounds, list them from front to back. The first background in the list appears on top. Use transparency (rgba, hsla, or transparent) in top layers to let bottom layers show through.
Background Shorthand Property
The background shorthand lets you set all background properties in one line:
/* Shorthand syntax */
.element {
background: [color] [image] [position] / [size] [repeat] [attachment];
}
/* Examples */
.element {
/* Color only */
background: #3498db;
/* Image with properties */
background: url('image.jpg') center / cover no-repeat;
/* Gradient */
background: linear-gradient(to right, red, blue);
/* Complete example */
background: #f0f0f0 url('pattern.png') top left / 100px 100px repeat;
}
/* Multiple backgrounds in shorthand */
.element {
background:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('photo.jpg') center / cover no-repeat;
}Note: The background-size must come after background-position and be separated by a slash (/). For example: center / cover not center cover.
Practical Examples
Hero Section with Gradient Overlay
Hero Section with Gradient Overlay
Card with Gradient Border
Cards with Gradient Accents
Key Takeaways
- background-color sets solid background colors
- background-image adds images or gradients
- background-size controls image scaling (cover, contain, custom)
- background-position sets where images appear
- background-repeat controls image tiling
- Linear gradients transition along a straight line
- Radial gradients radiate from a center point
- Conic gradients transition around a circle
- Repeating gradients create patterns and textures
- Multiple backgrounds layer from top to bottom
- Use transparency in overlays to let layers show through
- The
backgroundshorthand combines all properties
What's Next?
Now that you've mastered backgrounds and gradients, you're ready to explore Font Properties. In the next lesson, we'll dive into typography—learning how to control fonts, text sizing, weights, styles, and how to use web fonts to create beautiful, readable text on your websites.
Backgrounds and gradients are powerful tools for creating visual interest and depth. Practice combining different techniques—layer gradients with images, create patterns with repeating gradients, and experiment with color stops to achieve exactly the look you want!