Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
09 Mar

Dynamically-Resized Background Image with Backstretch

  • GPL License, MIT License, Tools
  • Leave a Comment

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. It will stretch any image to fit the page, and will automatically resize as the window size changes.

Images are fetched after your page is loaded, so your users won’t have to wait for the (often large) image to download before using your site. Backstretch jQuery Plugin is distributed under the MIT and GPL licenses.

backstretch

Requirements: jQuery Framework
Demo: http://srobbin.com/jquery-plugins/backstretch/
License: MIT, GPL License

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
YoxView – A Free jQuery Image Viewer Plugin

YoxView – A Free jQuery Image Viewer Plugin

Delays Loading of Images with Lazy Loader jQuery Plugin

Delays Loading of Images with Lazy Loader jQuery Plugin

Pretty and Lightweight jQuery Countdown Plugin

Pretty and Lightweight jQuery Countdown Plugin

Create Scrollable Interface with jQuery Image Scroller Plugin

Create Scrollable Interface with jQuery Image Scroller Plugin

Mobile Ready Elegant jQuery Slideshow for Free

Mobile Ready Elegant jQuery Slideshow for Free

Stunning Full Page Image Gallery with jQuery

Stunning Full Page Image Gallery with jQuery

Comments
  • http://blog.regnareb.com Regnareb

    Totally useless : http://css-tricks.com/perfect-full-page-background-image/

    Easily done with CSS in 5 lines, and doesn’t require Javascript.

  • http://www.constraintsolver.com Desfossez Thomas

    Bonjour, je m’étonne de voir ça sachant qu’avec du CSS on peut arriver au même resultat.
    HTML a mettre juste après la balise body:
    [div id="bg"]
    [div]
    [table cellspacing="0" cellpadding="0"]
    [tr]
    [td]
    [img src="IMAGE.JPG" /]
    [/td]
    [/tr]
    [/table]
    [/div]
    [/div]

    Et le CSS:
    /* BG */
    *{margin:0;padding:0;}
    #bg,#bg table,#bg td{height:100%;width:100%;}
    #bg{position:fixed;}
    #bg div{height:200%;left:-50%;position:absolute;top:-50%;width:200%;z-index:0;}
    #bg td{text-align:center;vertical-align:middle;}
    #bg img{min-height:50%;min-width:50%;margin:0 auto;}

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Use Web Workers for Image Manipulation
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • How to Make FullScreen Page Transitions with CSS
  • Super Smooth CSS Transitions for jQuery
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu86
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code54
  • eCommerce24
  • Framework215
  • Hosting13
  • Information239
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free739
  • MIT License408
Sponsors
Advertise Here
Partners
NetDNA