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
Selected Reading
Set all the background image properties in one section with CSS
The CSS background property is used to set all the background image properties in one section. This shorthand property allows you to define multiple background-related properties simultaneously, including image, position, repeat, and attachment.
Syntax
selector {
background: color image repeat attachment position;
}
Possible Values
| Property | Description |
|---|---|
color |
Background color (optional) |
image |
Background image URL |
repeat |
How the image repeats (repeat, no-repeat, repeat-x, repeat-y) |
attachment |
Image attachment (scroll, fixed) |
position |
Image position (top, center, bottom, left, right) |
Example
The following example demonstrates setting multiple background properties using the shorthand −
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
background: lightblue url("/css/images/css-mini-logo.jpg") no-repeat fixed top;
padding: 20px;
min-height: 300px;
border: 2px solid #333;
}
h1 {
color: #333;
margin-top: 0;
}
p {
color: #555;
line-height: 1.6;
}
</style>
</head>
<body>
<div id="demo">
<h1>www.tutorialspoint.com</h1>
<p>Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms. The journey commenced with a single tutorial on
HTML in 2006 and elated by the response it generated, we worked our
way to adding fresh tutorials to our repository which now proudly
flaunts a wealth of tutorials and allied articles on topics ranging
from programming languages to web designing to academics and much more.
</p>
</div>
</body>
</html>
A light blue container with a CSS logo image positioned at the top, non-repeating and fixed. The container displays heading and paragraph text with proper styling and padding.
Conclusion
The background shorthand property provides an efficient way to set multiple background properties in a single declaration. This approach reduces code length and improves maintainability when working with complex background configurations.
Updated on: 2026-03-15T11:43:27+05:30
222 Views
Advertisements