Skip to content

Instantly share code, notes, and snippets.

@roboshoes

roboshoes/_cover-background.scss

Last active December 13, 2015 22:09
Show Gist options
  • Save roboshoes/4982839 to your computer and use it in GitHub Desktop.
Save roboshoes/4982839 to your computer and use it in GitHub Desktop.
Download ZIP
This let's you set a background image with background-size set to cover and have it working down to IE8 (I believe also IE7?!). It's based on SCSS and uses Compass (http://compass-style.org/). There is one little flaw: while the `url()` is reltive to the css file the filter is relative to the HTML document. The whole "../../" is not really clean…
Raw
_cover-background.scss
@mixin cover-background( $path ) {
background-image: url( "../../" + $path );
@include background-size( cover );
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + $path + "', sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale");
}
@deefour
Copy link

deefour commented Sep 24, 2014 

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale");

should be

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{$path}", sizingMethod="scale");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment