WebAppers

/ best free open source web resources /

Shopify

Dynamically-Resized Background Image with Backstretch

Posted · Category: GPL License, MIT License, Tools

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

2 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;}

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons