HTML | DOM Style backgroundAttachment Property
The Style backgroundAttachment property in HTML DOM is used to set or return whether the background image should be fixed or scroll with the content.
Syntax:
- It returns the backgroundAttachment property.
object.style.backgroundAttachment
- It is used to set the backgroundAttachment property.
object.style.backgroundAttachment = "scroll|fixed|local|initial| inherit"
Return Values: It returns a string value, which representing how the background image is attached to the object within the document.
Property Values: Description of each property value with the example.
scroll: This value makes the background image scroll along with the element. It is the default value.
Example:
html
<!DOCTYPE html> < html > < head > < title > DOM Style backgroundAttachment 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; margin-top: 100px;"> w3wiki </ h1 > < b >DOM Style backgroundAttachment Property</ b > < p > Click on the button to change the attachment of the background image to 'scroll'. </ p > < button onclick="changeAttachment()"> Change attachment </ button > < div id="scrolling-area">< br > This is a large area for scrolling. </ div > <!-- Script to change backgroundAttachment --> < script > function changeAttachment() { document.body.style.backgroundAttachment = 'scroll'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
fixed: This value makes the background image fixed with regard to the viewport.
Example:
html
<!DOCTYPE html> < html > < head > < title > DOM Style backgroundAttachment Property </ title > < style > body { background: url( 'https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png') no-repeat right top / 200px; } #scrolling-area { height: 1000px; } </ style > </ head > < body > < h1 style="color: green; margin-top: 100px;"> w3wiki </ h1 > < b >DOM Style backgroundAttachment Property</ b > < p > Click on the button to change the attachment of the background image to 'scroll'. </ p > < button onclick="changeAttachment()"> Change attachment </ button > < div id="scrolling-area">< br > This is a large area for scrolling. </ div > <!-- Script to change backgroundAttachment --> < script > function changeAttachment() { document.body.style.backgroundAttachment = 'fixed'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
local: This value makes the background image scroll along with the element’s content.
Example:
html
<!DOCTYPE html> < html > < head > < title > DOM Style backgroundAttachment 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; margin-top: 100px;"> w3wiki </ h1 > < b >DOM Style backgroundAttachment Property</ b > < p > Click on the button to change the attachment of the background image to 'scroll'. </ p > < button onclick="changeAttachment()"> Change attachment </ button > < div id="scrolling-area">< br > This is a large area for scrolling. </ div > <!-- Script to change backgroundAttachment --> < script > function changeAttachment() { document.body.style.backgroundAttachment = 'local'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
initial: It is used to set this property to its default value.
Example:
html
<!DOCTYPE html> < html > < head > < title > DOM Style backgroundAttachment 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; margin-top: 100px;"> w3wiki </ h1 > < b >DOM Style backgroundAttachment Property</ b > < p > Click on the button to change the attachment of the background image to 'scroll'. </ p > < button onclick="changeAttachment()"> Change attachment </ button > < div id="scrolling-area">< br > This is a large area for scrolling. </ div > <!-- Script to change backgroundAttachment --> < script > function changeAttachment() { document.body.style.backgroundAttachment = 'initial'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
inherit: It inherits the property from its parent element.
Example:
html
<!DOCTYPE html> < html > < head > < title > DOM Style backgroundAttachment Property </ title > < style > .bg-img { height: 150px; background: url( 'https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png') no-repeat right top / 200px; } #parent { background-attachment: fixed; height: 1000px; } </ style > </ head > < body > < div id="parent"> < div class="bg-img"></ div > < h1 style="color: green;"> w3wiki </ h1 > < b > DOM Style backgroundAttachment Property </ b > < p > Click on the button to change the attachment of the background image to 'inherit'. </ p > < button onclick="changeAttachment()"> Change attachment </ button > </ div > <!-- Script to change backgroundAttachment property --> < script > function changeAttachment() { elem = document.querySelector('.bg-img'); elem.style.backgroundAttachment = 'inherit'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by DOM Style backgroundAttachment property are listed below:
- Google 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