Flash Player Required

BackDrop JS - A Cross-browser, Fixed, Scalable, Dynamic Background Image Solution

BackDrop JS uses Flash and Javascript to project an image onto the full background of the web browser. The background image scales proportionally to fit the size of the browser window and re-sizes itself automatically and without distortion when the browser window is adjusted.

When the content of the website scrolls the background image remains fixed. The image is any normal web image (jpeg, gif or png) referenced dynamically by a JavaScript variable. Best results are achieved when using a landscape image of the proportion
3 to 2 (e.g. 1200px wide, 800px high).

BackDrop JS works identically in all modern browsers with Flash installed. In IE6 (or in browsers without Flash) BackDrop JS gracefully degrades to setting the image as a repeating background, filling the browser.

BackDrop JS is Free to use for any commercial or non-commercial use without restriction.* Please report any bugs, fixes, or successful implementations via my contact page.

Download BackDrop JS Version 2.1:

Downloaded zip folder contains:

backdrop.swf (Flash Movie)
backdrop.fla (Flash Source)
backdrop.js (Javascript)
index.html (Demo Page)
myimage.jpg (Demo Image)

Documentation:

Implementation just got a whole lot easier in BackDrop JS 2.1. Place the Flash movie backdrop.swf and the JavaScript file backdrop.js in your web root. Include the JavaScript in the <head> section of your page:
<script type="text/javascript" src="backdrop.js"></script>

Now just place this snippet of code immediately after the <body> tag:
<div id="backdrop">
    <script type="text/javascript">
    loadBackDrop('myimage.jpg');
    </script>
</div>
Set 'myimage.jpeg' as the path to your background image, and that's it!

* BackDrop JS incorporates swfobject to embed the Flash elements in the page, released under the MIT Open Source License.

Upload your own background image


Maximum file size: 500K. Use a landscape image of proportion 3 to 2 for best results.

Open Book Load Image into BackDrop JS

Wheat Field Load Image into BackDrop JS

Castle Vault Load Image into BackDrop JS

Train Tracks Load Image into BackDrop JS

Idea! BackDrop JS could easily be adapted to make an attractive online image gallery.

© Black Otter Solutions Ltd. 2009
Reg. Office: Pendle Innovation Centre, Brook Street, Nelson, East Lancashire BB9 9PU
Company Registration No. 05419381 - Place of Registration: England & Wales

A Black Otter hides in the long grass!