The Style background property in HTML DOM is a short hand property used to set or return the background of an element. It can help to manipulate one or more of eight background properties.
Syntax:
- It returns the background property.
object.style.background
- It is used to set the background property.
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
Return Values: It returns a string value, which represents the background of an element.
Property Values: There are 8 property in background those are described below:
- color: It is used to set the background color of an element. It corresponds to the background-color property.
- image: It is used to set the background image of an element. It corresponds to the background-image property.
- repeat: It is used to set how a background image should be repeated along the x and y-axis. It corresponds to the background-repeat property.
- attachment: It is used to set whether the image would scroll or remain fixed. It corresponds to the background-attachment property.
- position: It is used to set the starting position of a background image. It corresponds to the background-position property.
- size: It is used to set the size of a background image in fixed units or a percentage. It corresponds to the background-size property.
- origin: The background-origin property specifies the origin position of a background image. It corresponds to the background-origin property.
- clip: It is used to set the painting area of a background image. It corresponds to the background-clip property.
- initial: It is used to set the property to its default value.
- inherit: It is used to inherit the property from its parent.
Example 1: background-color property
html
<!DOCTYPE html><html>
<head>
<title>
DOM Style Background Property
</title>
<style>
.GFG {
height: 250px;
width: 250px;
border-style: solid;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style Background Property</b>
<p>
Click on the button to set
the background color
</p>
<div class="GFG"></div>
<button onclick="setBg()">
Set background color
</button>
<!-- Script to set the background color -->
<script>
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background = "green";
}
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Example 2: background-image property
html
<!DOCTYPE html><html>
<head>
<title>
DOM Style Background Property
</title>
<style>
.GFG {
height: 250px;
width: 250px;
border-style: solid;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style Background Property</b>
<p>
Click on the button to set
the background image
</p>
<div class="GFG"></div>
<button onclick="setBg()">
Set background color
</button>
<!-- Script to set the background image -->
<script>
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background =
}
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Example 3: This example using repeat-x property to repeat the background image along the x axis.
html
<!DOCTYPE html><html>
<head>
<title>
DOM Style Background Property
</title>
<style>
.GFG {
height: 250px;
width: 250px;
border-style: solid;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style Background Property</b>
<p>
Click on the button to set
the background image
</p>
<div class="GFG"></div>
<button onclick="setBg()">
Set background color
</button>
<!-- Script to set the background color -->
<script>
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background =
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') repeat-x"; }
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Example 4: This example sets the attachment property to ‘scroll’.
html
<!DOCTYPE html><html>
<head>
<title>
DOM Style Background Property
</title>
<style>
body {
background: url(
no-repeat right top / 200px;
background-attachment: fixed;
}
#scrolling-area {
height: 1000px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style Background Property</b>
<p>
Click on the button to set
the background color
</p>
<div class="GFG"></div>
<button onclick="setBg()">
Set background color
</button>
<div id="scrolling-area"><br>
This is a large area for scrolling.
</div>
<!-- Script to change backgroundAttachment -->
<script>
function setBg() {
document.body.style.backgroundAttachment
= 'scroll';
}
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Example 5: This example sets the position of the background image to ‘center’.
html
<!DOCTYPE html><html>
<head>
<title>
DOM Style Background Property
</title>
<style>
.GFG {
height: 250px;
width: 250px;
border-style: solid;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style Background Property</b>
<p>
Click on the button to set
the background image
</p>
<div class="GFG"></div>
<button onclick="setBg()">
Set background color
</button>
<!-- Script to set the background color -->
<script>
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background =
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat center"; }
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Example 6: This example sets the size of the background image to ‘200px’ in width and ‘150px’ in height.
html
<!DOCTYPE html><html>
<head>
<title>
DOM Style Background Property
</title>
<style>
.GFG {
height: 250px;
width: 250px;
border-style: solid;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style Background Property</b>
<p>
Click on the button to set
the background image
</p>
<div class="GFG"></div>
<button onclick="setBg()">
Set background color
</button>
<!-- Script to set the background color -->
<script>
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background =
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat center / 200px 150px "; }
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Example 7: This example sets the background origin to ‘border-box’.
html
<!DOCTYPE html><html>
<head>
<title>
DOM Style Background Property
</title>
<style>
.GFG {
height: 250px;
width: 250px;
padding: 20px;
border: 10px dotted;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style Background Property</b>
<p>
Click on the button to set
the background image
</p>
<div class="GFG"></div>
<button onclick="setBg()">
Set background image
</button>
<!-- Script to set background origin property -->
<script>
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background =
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat border-box"; }
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Example 8: This example sets the background clip to ‘content-box’.
html
<!DOCTYPE html><html>
<head>
<title>
DOM Style Background Property
</title>
<style>
.GFG {
height: 250px;
width: 250px;
border: 10px dotted;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style Background Property</b>
<p>
Click on the button to set
the background color
</p>
<div class="GFG"></div>
<button onclick="setBg()">
Set background color
</button>
<!-- Script to set background clip property -->
<script>
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background = "green content-box";
}
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Example 9: It set the property it’s default
html
<!DOCTYPE html><html>
<head>
<title>
DOM Style Background Property
</title>
<style>
.GFG {
height: 250px;
width: 250px;
border-style: solid;
background: green
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style Background Property</b>
<p>
Click on the button to set the
background to initial
</p>
<div class="GFG"></div>
<button onclick="setBg()">
Set background
</button>
<!-- Script to set background property -->
<script>
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background = "initial";
}
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Example 10: It is used to inherit the property from its parent
HTML
<!DOCTYPE html><html>
<head>
<title>
DOM Style Background Property
</title>
<style>
.GFG {
margin: 20px;
height: 100px;
width: 100px;
border: 5px solid;
}
#parent {
height: 250px;
width: 250px;
border: 1px solid;
background:
url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') center / cover; }
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style Background Property</b>
<p>
Click on the button to set
the background to inherit
</p>
<div id="parent">
<div class="GFG"></div>
</div>
<button onclick="setBg()">
Set background
</button>
<!-- Script to set background property -->
<script>
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background = "inherit";
}
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Supported Browsers: The browser supported by background Property are listed below:
- Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Safari 1.0 and above