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
How to set all the background properties in one declaration with JavaScript DOM?
To set multiple background properties in JavaScript, use the background property. This shorthand property allows you to set background color, image, position, repeat, and other background-related properties in a single declaration.
Syntax
element.style.background = "color image repeat attachment position";
Background Property Values
The background shorthand can include the following properties in any order:
- background-color: Sets the background color
-
background-image: Sets the background image using
url() - background-repeat: Controls image repetition (repeat, no-repeat, repeat-x, repeat-y)
- background-position: Sets image position (left, right, center, top, bottom, or pixel values)
- background-attachment: Controls scrolling behavior (scroll, fixed)
Example: Setting Background Image with Position
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 300px;
height: 200px;
border: 2px solid #333;
margin: 20px 0;
}
</style>
</head>
<body>
<button onclick="setBackground()">Set Background</button>
<div id="myDiv">Click the button to change background</div>
<script>
function setBackground() {
const element = document.getElementById('myDiv');
element.style.background = "url('/html5/images/html5-mini-logo.jpg') no-repeat center lightblue";
}
</script>
</body>
</html>
Example: Multiple Background Combinations
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
width: 250px;
height: 100px;
border: 1px solid #ccc;
margin: 10px 0;
padding: 10px;
}
</style>
</head>
<body>
<button onclick="applyBackgrounds()">Apply Different Backgrounds</button>
<div id="box1" class="demo-box">Box 1: Color only</div>
<div id="box2" class="demo-box">Box 2: Image with repeat</div>
<div id="box3" class="demo-box">Box 3: Full shorthand</div>
<script>
function applyBackgrounds() {
// Color only
document.getElementById('box1').style.background = "#ffeb3b";
// Image with repeat
document.getElementById('box2').style.background = "url('/html5/images/html5-mini-logo.jpg') repeat-x";
// Complete shorthand: color, image, repeat, position
document.getElementById('box3').style.background = "#e3f2fd url('/html5/images/html5-mini-logo.jpg') no-repeat right top";
}
</script>
</body>
</html>
Common Background Combinations
| Purpose | Syntax Example |
|---|---|
| Color only | element.style.background = "#ff5722" |
| Image only | element.style.background = "url('image.jpg')" |
| Image + Position | element.style.background = "url('image.jpg') center" |
| Color + Image | element.style.background = "#ccc url('image.jpg') no-repeat" |
Key Points
- Values can be specified in any order within the shorthand
- Missing values will use their default settings
- Use quotes around URL paths in
url() - The shorthand overwrites all individual background properties
Conclusion
The background shorthand property provides an efficient way to set multiple background properties at once. This approach reduces code and ensures consistent styling across your web applications.
Updated on: 2026-03-15T23:18:59+05:30
174 Views
Advertisements