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"> w3wiki </ 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"> w3wiki </ 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 = "url('https://media.w3wiki.net/wp-content/uploads/20190314004249/sample-image2.png')"; } </ 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"> w3wiki </ 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.w3wiki.net/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( 'https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png') no-repeat right top / 200px; background-attachment: fixed; } #scrolling-area { height: 1000px; } </ style > </ head > < body > < h1 style="color: green"> w3wiki </ 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"> w3wiki </ 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.w3wiki.net/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"> w3wiki </ 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.w3wiki.net/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"> w3wiki </ 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.w3wiki.net/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"> w3wiki </ 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"> w3wiki </ 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.w3wiki.net/wp-content/uploads/20190314004249/sample-image2.png') center / cover; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ 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
Contact Us