Want to add colors, images, or gradients to your website’s background? The CSS background property lets you do all that and more.
In this guide, you’ll learn:
- How the CSS
backgroundproperty works - All major background-related properties
- Real-world examples for each one
What is CSS Background?
The CSS background property is used to set the background of an HTML element — including color, images, positioning, and repeat behavior.
You can use a single shorthand property or apply styles using multiple background-specific properties.
Basic CSS Background Properties
| Property | Description |
|---|---|
background-color | Sets background color |
background-image | Sets background image |
background-repeat | Defines how/if the background image repeats |
background-position | Positions the background image |
background-size | Specifies the size of the background image |
background-attachment | Fixes or scrolls the image with the page |
background (shorthand) | Combines all background properties |
1. Background Color
body {
background-color: #f0f0f0;
}
You can use named colors, hex codes, rgb() or hsl() values.
2. Background Image
header {
background-image: url('banner.jpg');
}
Make sure the image is properly linked and optimized for web.
3. Background Repeat
By default, images repeat. You can control it:
div {
background-repeat: no-repeat;
}
Other values:
repeat-x– Repeat horizontallyrepeat-y– Repeat verticallyno-repeat– Don’t repeat
4. Background Position
Set where the background image appears:
div {
background-position: center center;
}
Other common values:top left, bottom right, 50% 50%
5. Background Size
Control the size of the image:
section {
background-size: cover;
}
cover: Fill entire area (may crop)contain: Show full image (may not cover area)- Custom values like
100px 100px
6. Background Attachment
body {
background-attachment: fixed;
}
scroll: background scrolls with page (default)fixed: background stays fixed during scroll
7. CSS Background Shorthand
You can combine all background properties into one line:
div {
background: #fff url('image.jpg') no-repeat center center / cover;
}
Bonus: Background Gradients
div {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
Gradients are supported using:
linear-gradient()radial-gradient()conic-gradient()(newer)
Here is HTML/CSS code for you to test on your side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Example</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.background-color {
background-color: #4CAF50;
color: white;
padding: 40px;
text-align: center;
}
.background-image {
background-image: url('https://via.placeholder.com/1200x400');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 100px 20px;
color: white;
text-align: center;
}
.background-gradient {
background: linear-gradient(to right, #00c6ff, #0072ff);
color: white;
padding: 60px 20px;
text-align: center;
}
.background-fixed {
background-image: url('https://via.placeholder.com/1000x600');
background-attachment: fixed;
background-size: cover;
background-position: center;
padding: 80px 20px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<section class="background-color">
<h2>Background Color Example</h2>
<p>This section uses a simple background color.</p>
</section>
<section class="background-image">
<h2>Background Image Example</h2>
<p>This section uses a full-width background image.</p>
</section>
<section class="background-gradient">
<h2>CSS Gradient Background</h2>
<p>This background uses a linear gradient with two colors.</p>
</section>
<section class="background-fixed">
<h2>Fixed Background Image</h2>
<p>This section’s image stays fixed while scrolling.</p>
</section>
</body>
</html>
What This Covers:
background-colorbackground-imagebackground-sizebackground-positionbackground-repeatbackground-attachmentlinear-gradient()
Tips:
Avoid using large background images that slow down page speed. Optimize them with compression tools and use lazy loading if possible.
Conclusion
CSS backgrounds are essential for making your website visually appealing. Whether you’re using colors, images, or gradients, mastering background properties gives you full control over your site’s design.
