Skip to content

Instantly share code, notes, and snippets.

@erikflowers

erikflowers/fixed-screen-layered-background.less

Last active January 31, 2019 10:48
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save erikflowers/6393836 to your computer and use it in GitHub Desktop.
Save erikflowers/6393836 to your computer and use it in GitHub Desktop.
Download ZIP
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:
Raw
fixed-screen-layered-background.less
.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
Copy link
Author

Example: http://codepen.io/flowerpower/pen/Dxahd

@erikflowers
Copy link
Author

A grid image to use: http://www.helloerik.com/downloads/grid.png.zip

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