LESS CSS Multi-Background Mixin


/ Published in: CSS
Save to your folder(s)

This snippet will add a linear-gradient atop a background image. With this you'll be able to assign tiling and non-tiling backgrounds with a top-down gradient. The linear-gradient syntax includes the newer, standard -webkit- syntax as well as the older syntax.


Copy this code and paste it in your HTML
  1. .multi-bg-grad(
  2. @color: "#fff",
  3. @bgimg: "../images/img.jpg",
  4. @pos: 50% 50%,
  5. @repeat: repeat,
  6. @begin: #fff,
  7. @end: #000,
  8. @switch: 100%
  9. ) {
  10. /* browsers without support for multiple bgs */
  11. background: @color url(@bgimg) @pos @repeat;
  12. /* Webkit - oldest -> newer syntax */
  13. background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin),
  14. color-stop(@switch, @end)),
  15. @color url(@bgimg) @pos @repeat;
  16. background: -webkit-linear-gradient(top, @begin, @end @switch),
  17. @color url(@bgimg) @pos @repeat;
  18. background: -o-linear-gradient(top, @begin, @end @switch),
  19. @color url(@bgimg) @pos @repeat;
  20. background: -moz-linear-gradient(top, @begin, @end @switch),
  21. @color url(@bgimg) @pos @repeat;
  22. background: linear-gradient(top, @begin, @end @switch),
  23. @color url(@bgimg) @pos @repeat;
  24. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.