Backgrounds are a crucial part of web design, setting the stage for the visual appearance and user experience of a website. CSS offers a range of properties to style backgrounds effectively. This guide covers various CSS background properties, including color, images, gradients, and more with examples.
CSS Background Color
The simplest way to add a background to an element is by using a solid color. The background-color property sets the background color of an element.
Syntax
Selector {
background-color: color;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bg-color {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="bg-color">
This div has a light
grey background color.
</div>
</body>
</html>
CSS Background Image
You can set an image as the background of an element using the background-image property. You can also control how the image is positioned and repeated.
Syntax
Selector {
background-image: url('path-to-image');
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bg-image {
width: 150px;
height: 150px;
background-image: url('img.png');
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg-image">
This div has a background image.
</div>
</body>
</html>
CSS Background Gradient
Gradients can create visually appealing backgrounds. CSS provides linear and radial gradients.
1. Linear Gradient
A linear gradient transitions colors along a straight line.
Syntax
element {
background: linear-gradient(direction, color1, color2);
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.linear-gradient {
width: 100%;
height: 150px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
</style>
</head>
<body>
<div class="linear-gradient">
This div has a linear gradient background.
</div>
</body>
</html>
2. Radial Gradient
A radial gradient transitions colors outward from a central point.
Syntax
element {
background: radial-gradient(shape size at position, color1, color2);
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.radial-gradient {
width: 500px;
height: 250px;
background: radial-gradient(circle, #ff7e5f, #feb47b);
}
</style>
</head>
<body>
<div class="radial-gradient">
This div has a radial gradient background.
</div>
</body>
</html>
CSS Background Position
The background-position property sets the initial position of a background image.
Syntax
element {
background-position: position;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bg-position {
width: 150px;
height: 150px;
background-image: url('img.png');
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="bg-position">
Centered background image.
</div>
</body>
</html>
CSS Background Size
The background-size property defines the size of the background image.
Syntax
element {
background-size: size;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bg-size {
width: 150px;
height: 150px;
background-image: url('img.png');
background-size: cover;
}
</style>
</head>
<body>
<div class="bg-size">
Background image covers the entire div.
</div>
</body>
</html>
CSS Background Repeat
The background-repeat property controls the repetition of the background image.
Syntax
element {
background-repeat: repeat-type;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bg-repeat {
width: 300px;
height: 150px;
background-image: url('img.png');
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="bg-repeat">
Background image repeats horizontally.
</div>
</body>
</html>
CSS Background Attachment
The background-attachment property determines whether the background image scrolls with the page or stays fixed.
Syntax
element {
background-attachment: scroll | fixed | local;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bg-attachment {
width: 300px;
height: 300px;
background-image: url('img.png');
/* Background image stays fixed during scroll */
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="bg-attachment">
Background image remains
fixed while scrolling.
</div>
</body>
</html>
CSS Shorthand for Backgrounds
The background shorthand property allows you to set multiple background properties at once.
Syntax
element {
background: color image position/size repeat attachment;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bg-shorthand {
width: 300px;
height: 300px;
background: #ff7e5f url('img.png') no-repeat center center/cover;
}
</style>
</head>
<body>
<div class="bg-shorthand">
Shorthand for background properties.
</div>
</body>
</html>