Web Development - CSS Backgrounds
CSS Backgrounds
CSS allows you to style the background of HTML elements using colors, images, gradients, and positioning.
Background Color
The background-color property sets the background color of an element.
Example
Using background color:
body { background-color: lightgray; }
h1 { background-color: steelblue; color: white; }
p { background-color: lightyellow; }
Try it Yourself »
Background Image
The background-image property adds an image behind the content of an element.
Example
Adding a background image:
body {
background-image: url('background.jpg');
}
Try it Yourself »
By default, the image repeats both horizontally and vertically.
Background Repeat
Use the background-repeat property to control repetition.
repeat- repeats in both directions (default)repeat-x- repeats horizontallyrepeat-y- repeats verticallyno-repeat- shows only one image
Example
Single background image:
body {
background-image: url('mountain.jpg');
background-repeat: no-repeat;
}
Try it Yourself »
Background Position
Use the background-position property to control where the image appears.
Example
Positioning a background image:
body {
background-image: url('tree.jpg');
background-repeat: no-repeat;
background-position: right top;
}
Try it Yourself »
Background Size
Use background-size to scale the image.
auto- default sizecover- covers the entire areacontain- fits the image within the element
Example
Covering the background:
body {
background-image: url('forest.jpg');
background-size: cover;
background-repeat: no-repeat;
}
Try it Yourself »
Background Attachment
Use background-attachment to control if the image scrolls or stays fixed.
scroll- background moves with the page (default)fixed- background stays fixed when scrollinglocal- background scrolls within the element
Example
Fixed background image:
body {
background-image: url('sky.jpg');
background-attachment: fixed;
background-size: cover;
}
Try it Yourself »
Multiple Backgrounds
You can set more than one background image by separating them with commas.
Example
Multiple background images:
body {
background-image: url('pattern.png'), url('wall.jpg');
background-repeat: repeat, no-repeat;
background-position: left top, center;
}
Try it Yourself »
Background Shorthand
You can combine multiple background properties into one shorthand declaration.
Example
Using shorthand:
body {
background: url('city.jpg') no-repeat center/cover fixed;
}
Try it Yourself »
Adding Text Over the Image
You can place text or other elements inside the same <div>
- the background image will stay behind them.
Example
<style>
div.hero {
background-image: url("mountains.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 300px;
color: white;
text-align: center;
padding-top: 100px;
}
</style>
<div class="hero">
<h1>Welcome</h1>
<p>Enjoy the view</p>
</div>
Try it Yourself »
Background Gradient
CSS gradients let you create smooth color transitions without images.
Linear Gradient
Example
Linear gradient background:
div {
background: linear-gradient(to right, red, yellow);
height: 100px;
}
Try it Yourself »
Radial Gradient
Example
Radial gradient background:
div {
background: radial-gradient(circle, red, yellow, green);
height: 100px;
}
Try it Yourself »
Best Practices
- Use gradients instead of large images for performance.
- Set
background-size: coverfor full-screen backgrounds. - Combine properties with shorthand for cleaner code.
- Always ensure text remains readable on background images.
Next, you'll learn about CSS Borders - how to add outlines, rounded corners, and creative border effects.
