Examples – Page background

Note: Please keep in mind, that if you want to place a background for the entire page (the body tag), that might break your page in peculiar ways as the plugin will wrap all of the body content in two additional div elements. This can cause loss of styling for elements which' CSS selectors look like this: body > .class {…}, or even broken JavaScript functionality. Still, if you insist on using the body background, make sure you do all of your JavaScript files inclusions in the head section of your page instead of in the body, or they will be loaded twice.

HTML only code:

<body
    data-multibackground="debug"
    data-multibackground-layer-0-type="image"
    data-multibackground-layer-0-attachment="parallax"
    data-multibackground-layer-0-url="./assets/birds.jpg">
        ...
</body>

JavaScript only code:

$("body").multiBackground({"type": "image", "attachment": "parallax", "url": "./assets/birds.jpg"});

Here is some sample content to make the page longer, so you can see the scroll effect :)

Here is some sample content to make the page longer, so you can see the scroll effect :)

Here is some sample content to make the page longer, so you can see the scroll effect :)

Here is some sample content to make the page longer, so you can see the scroll effect :)

Here is some sample content to make the page longer, so you can see the scroll effect :)