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.
Maximum file size: 500K. Use a landscape image of proportion 3 to 2 for best results.
Idea! BackDrop JS could easily be adapted to make an attractive online image gallery.
MyMSK Clinic
Back, Joint and Muscle Pain Relief.
Osteopath Pain Specialist Manchester
Samantha Jaine's Hair Boutique
Welcome to the super-creative, ultra-imaginative world of Samantha Jaine's.
Samantha Jaine's Hairdresser Burnley
© Black Otter Solutions Ltd. 2019
Reg. Office: Pendle Enterprise Haven, 138 Every Street, Nelson, East Lancashire BB9 7EX
Company Registration No. 05419381 - Place of Registration: England & Wales
Freelance Development and Web Programming
based in Nelson, Lancashire, Northwest, UK
T: 07709 681 581
