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
How to set different background properties in one declaration?
CSS (Cascading Style Sheets) provides a powerful background shorthand property that allows you to set multiple background properties in a single declaration. This approach is efficient for web developers as it saves time, reduces code length, and improves readability while maintaining full control over background styling.
Understanding Background Properties
Before using the background shorthand, it's important to understand the individual background properties available in CSS
background-color Sets the background color of an element using color names, hex values, RGB, or HSL values.
background-image Sets a background image using URLs, linear gradients, or radial gradients.
background-repeat Controls how background images repeat with values like
repeat,repeat-x,repeat-y, andno-repeat.background-position Sets the position of the background image using keywords (
top,bottom,left,right,center) or specific coordinates.background-size Controls the size of the background image with values like
auto,cover,contain, or specific dimensions.background-attachment Determines whether the background image scrolls with the content (
scroll) or remains fixed (fixed).
Syntax
The background shorthand property follows this syntax
selector {
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size];
}
Note The order of properties is flexible, but background-size must be preceded by a forward slash (/) and placed after background-position. All properties are optional and separated by spaces.
Setting Multiple Background Properties
Example Background Image with Multiple Properties
Here's how to set a background image along with other properties in one declaration
<!DOCTYPE html>
<html>
<head>
<title>Background Image Properties</title>
<style>
body {
background: #f0f0f0 url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") no-repeat center center / cover fixed;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.content {
background: rgba(255, 255, 255, 0.9);
padding: 20px;
margin: 50px auto;
width: 300px;
text-align: center;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="content">
<h3>Background Image with Multiple Properties</h3>
<p>This example demonstrates background color, image, repeat, position, size, and attachment in one declaration.</p>
</div>
</body>
</html>
This example sets a light gray fallback color, a background image that doesn't repeat, is centered both horizontally and vertically, covers the entire viewport, and remains fixed during scrolling.
Example Gradient Background
Setting a gradient background with positioning properties
<!DOCTYPE html>
<html>
<head>
<title>Gradient Background</title>
<style>
body {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1) no-repeat center / cover;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
padding: 100px 20px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to TutorialsPoint</h1>
<h3>Gradient Background with Multiple Properties</h3>
</div>
</body>
</html>
This creates a diagonal gradient from red to teal to blue, positioned at the center and covering the full viewport area.
Example Multiple Background Layers
CSS allows setting multiple background images in a single declaration
<!DOCTYPE html>
<html>
<head>
<title>Multiple Background Layers</title>
<style>
.multi-bg {
background:
linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3)),
radial-gradient(circle at top right, #ff6b6b, transparent 50%),
linear-gradient(to bottom, #4ecdc4, #45b7d1);
height: 300px;
margin: 20px auto;
width: 80%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
font-family: Arial, sans-serif;
}
.text-content {
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 8px;
text-align: center;
}
</style>
</head>
<body style="margin: 0; padding: 20px;">
<h2 style="text-align: center; font-family: Arial, sans-serif;">Multiple Background Layers</h2>
<div class="multi-bg">
<div class="text-content">
<h3>Layered Backgrounds</h3>
<p>Three gradient layers combined in one declaration</p>
</div>
</div>
</body>
</html>
This example demonstrates layering multiple gradients where each background is separated by commas. The first background (topmost layer) is listed first.
Common Background Shorthand Patterns
Here are frequently used background shorthand patterns
| Pattern | Declaration | Description |
|---|---|---|
| Solid Color | background: #3498db; |
Simple background color |
| Full Cover Image | background: url('img.jpg') center/cover; |
Image covering entire area |
| Fixed Background | background: url('img.jpg') fixed center/cover; |
Image remains fixed during scroll |
| Linear Gradient | background: linear-gradient(45deg, red, blue); |
Diagonal gradient background |
| Fallback Color | background: #ccc url('img.jpg') center/cover; |
Color shows if image fails to load |
Example Comprehensive Background Settings
This example demonstrates various background shorthand techniques
<!DOCTYPE html>
<html>
<head>
<title>Comprehensive Background Examples</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
padding: 20px;
}
.example {
height: 150px;
margin: 20px 0;
border: 2px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
.solid { background: #e74c3c; }
.gradient { background: linear-gradient(to right, #f39c12, #e74c3c); }
.pattern { background: #2c3e50 repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px); }
.radial { background: radial-gradient(circle at center, #9b59b6, #2c3e50); }
</style>
</head>
<body>
<h2>Background Shorthand Examples</h2>
<div class="example solid">Solid Color Background</div>
<div class="example gradient">Linear Gradient Background</div>
<div class="example pattern">Multiple Gradients Pattern</div>
<div class="example radial">Radial Gradient Background</div>
</body>
</html>
Each example demonstrates a different use of the background shorthand property to create various visual effects.
Key Points to Remember
The background shorthand property can accept multiple values separated by spaces.
Background-size must follow background-position with a forward slash separator (
/).Multiple backgrounds can be layered using comma separation.
Always include a fallback background-color when using images in case the image fails to load.
The order of most properties is flexible, except for position/size which must maintain their relationship.
Conclusion
The CSS background shorthand property is an efficient way to set multiple background properties in a single declaration. It reduces code length, improves readability, and allows for complex background compositions including gradients, images, and layered effects. Mastering this shorthand property is essential for creating visually appealing and maintainable CSS code.
394 Views
