HTML | DOM Style background Property
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 >
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 >
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 >
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background =
}
</ 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 >
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 >
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background =
}
</ 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 >
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background =
}
</ 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 >
function setBg() {
elem = document.querySelector('.GFG');
elem.style.background =
}
</ 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 >
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 >
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:
}
</ 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 >
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
Last Updated :
09 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...