Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Less mixin for layering 2 images in a background, and using "background-cover" so the bottom layer is always full size. Good for scrolling fixed backgrounds where you want a screen or other element on top. Here's a 2x2 pixel grid to get you started: http://www.helloerik.com/downloads/grid.png.zip See an example here:
.background-layers(@top, @bottom) {
background: url(@top), url(@bottom);
background-position: top center, top center;
background-attachment: fixed, fixed;
background-repeat: repeat, repeat;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;
}
/////// Use it like this. don't forget the single quotes ///////
.background-layers('the-top-image.png', 'the-bottom-image.jpg');
@erikflowers

This comment has been minimized.

Copy link
Owner Author

erikflowers commented Aug 30, 2013

@erikflowers

This comment has been minimized.

Copy link
Owner Author

erikflowers commented Aug 30, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.