Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Background Properties
CSS background properties help us style the background of elements. The CSS background property is a shorthand for specifying the background of an element. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin and background-attachment together comprise the CSS background properties.
Syntax
selector {
background: color image repeat position / size attachment origin clip;
}
Background Properties
| Property | Description |
|---|---|
background-color |
Sets the background color of an element |
background-image |
Sets background image(s) for an element |
background-repeat |
Controls how background images repeat |
background-position |
Sets the position of background images |
background-size |
Specifies the size of background images |
background-attachment |
Controls scrolling behavior of background |
Example: Background Image with Properties
The following example demonstrates background image with size and position properties −
<!DOCTYPE html>
<html>
<head>
<style>
#main {
margin: auto;
width: 300px;
height: 200px;
background-image: url("/css/images/logo.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border: 2px solid #ccc;
}
#nested {
height: 100px;
width: 200px;
background-color: rgba(255, 255, 255, 0.8);
background-image: url("/css/images/icon.png");
background-repeat: no-repeat;
background-position: center;
background-size: 50px 50px;
margin: 50px auto;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="main">
<div id="nested"></div>
</div>
</body>
</html>
A container with a background image covering the entire area, containing a nested div with a semi-transparent background and centered icon.
Example: Multiple Background Images
The following example shows how to use multiple background images with different positions −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-bg {
height: 300px;
width: 100%;
background-image:
url("/images/pattern1.png"),
url("/images/pattern2.png"),
url("/images/background.jpg");
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: 10% 10%, center top, center center;
background-size: 100px 100px, auto 50px, cover;
border: 2px solid #333;
}
.content {
padding: 20px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
font-size: 24px;
text-align: center;
line-height: 260px;
}
</style>
</head>
<body>
<div class="multi-bg">
<div class="content">Multiple Backgrounds</div>
</div>
</body>
</html>
A container displaying multiple layered background images with different positioning, sizing, and repeat patterns, with white text overlaid on top.
Example: Background Shorthand
The following example demonstrates the shorthand background property −
<!DOCTYPE html>
<html>
<head>
<style>
.shorthand-example {
height: 200px;
width: 100%;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4) no-repeat center center / cover fixed;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="shorthand-example">
Background Shorthand Property
</div>
</body>
</html>
A container with a diagonal gradient background from red to teal, with centered white text reading "Background Shorthand Property".
Conclusion
CSS background properties provide powerful tools for styling element backgrounds. The shorthand background property allows you to set multiple background properties at once, while individual properties give you fine-grained control over appearance.
2K+ Views
