backgroundAttachment Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:backgroundAttachment

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. backgroundAttachment

Description

The backgroundAttachment property sets or gets whether a background image should scroll with the content, or be fixed.

Syntax

Return the backgroundAttachment property:

Set the backgroundAttachment property:

Property Values

Value Description
scroll The background scrolls along with the element. This is default
fixed The background is fixed with regard to the viewport
local The background scrolls along with the element's contents
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: scroll
Return Value: A String, representing how the background image is attached to the object within the document
CSS VersionCSS1

Set a background-image to be fixed

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body style="background:#f3f3f3 url('http://java2s.com/resources/c.png') no-repeat fixed;">

<h1>Hello World!</h1>

<p>The background-image is fixed.</p>
<p>The background-image is fixed.</p>
<p>The background-image is fixed.</p>
<p>The background-image is fixed.</p>
<p>The background-image is fixed.</p>
<p>The background-image is fixed.</p>

<button onclick="myFunction()">Get background-attachment value</button>

<script>
function myFunction() {//w w  w  . ja v  a 2 s. c o m
    console.log(document.body.style.backgroundAttachment);
}
</script>

</body>
</html>

Related Tutorials