Background Supersizer with Prototype

waltd · September 18, 2012, 10:07pm

This gives you a perfect background image fallback on browsers that don’t support CSS3:

gist.github.com

https://gist.github.com/walterdavis/3745984

gistfile1.js

  if ("backgroundSize" in document.body.style) {
    return;
  }
  var body = $$('body').first(), 
  img = body.getStyle('background-image').sub(/url\((.+?)\)/,'#{1}') || 'default.jpeg',
  fill = new Element('img', {src: img,alt: ''}).
    setStyle('position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1');
  body.setStyle('background:none');
  body.insert(fill);

Just set background-size: cover on your background image, and apply this patch with Protaculous.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options