Skip to content

Instantly share code, notes, and snippets.

@apathetic
Created July 5, 2012 18:39
Show Gist options
  • Save apathetic/3055575 to your computer and use it in GitHub Desktop.
Save apathetic/3055575 to your computer and use it in GitHub Desktop.
resize background image to fit (updated)
/*
* Background Resizer
* Uses css3 to resize bg images to fit a container, with a js fallback for IE
*/
/* ( there could be multiple slides in #bg ) */
#bg article {
position:absolute;
width:100%;
height:100%;
overflow:hidden;
background:center center;
-webkit-background-size:cover;
-moz-background-size:cover !important;
-o-background-size:cover;
background-size:cover !important;
}
---------------------
if ( $.browser.msie ) {
$('#bg article').each(function() {
var pattern = /url\(|\)|"|'/g;
var src = $(this).css('background-image').replace(pattern,"");
var id = $(this).attr('id');
$('head').append("<style>#slide"+ id +"{progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale'); -ms-filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' "+ src +"', sizingMethod='scale')';}</style>");
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment