The background-attachment CSS property specifies whether background images are fixed with regard to the viewport (fixed), or scroll along with the element (scroll), or its contents (local).
background-attachment: value; object.style.backgroundAttachment = "value"; <'background-attachment'> = <attachment># <attachment> = scroll | fixed | local scroll The background is fixed with regard to the element itself.
fixed The background is fixed with regard to the viewport.
local The background is fixed with regard to the element's contents.
<!doctype html>
<html>
<head>
<style>
html
{
height: 150%;
}
body
{
background-attachment: local;
background-image: url(/assets/svg/HappyFace.svg);
}
</style>
</head>
<body>
<p>local</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
html
{
height: 150%;
}
body
{
background-attachment: scroll;
background-image: url(/assets/svg/HappyFace.svg);
}
</style>
</head>
<body>
<p>scroll</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
html
{
height: 150%;
}
body
{
background-image: url(/assets/svg/HappyFace.svg);
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">fixed</button>
<button onmouseover="myfunction(innerHTML)">local</button>
<button onmouseover="myfunction(innerHTML)">scroll</button>
<p>background-attachment</p>
<script>
function myfunction(myparameter)
{
document.querySelector("body").style.backgroundAttachment = myparameter;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
html
{
height: 150%;
}
body
{
background-image: url(/assets/svg/HappyFace.svg);
}
</style>
</head>
<body>
<button>initial</button>
<button>fixed</button>
<button>local</button>
<button>scroll</button>
<p>background-attachment</p>
<script>
function myfunction(myparameter)
{
document.querySelector("body").style.backgroundAttachment = myparameter;
}
for(const myelement of document.querySelectorAll("button"))
{
myelement.addEventListener("mouseover", ()=>{myfunction(myelement.innerHTML)});
}
</script>
</body>
</html>