Revision: 44758
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at April 18, 2011 08:37 by dtigraphics
Initial Code
.multi-bg-grad(
@color: "#fff",
@bgimg: "../images/img.jpg",
@pos: 50% 50%,
@repeat: repeat,
@begin: #fff,
@end: #000,
@switch: 100%
) {
/* browsers without support for multiple bgs */
background: @color url(@bgimg) @pos @repeat;
/* Webkit - oldest -> newer syntax */
background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin),
color-stop(@switch, @end)),
@color url(@bgimg) @pos @repeat;
background: -webkit-linear-gradient(top, @begin, @end @switch),
@color url(@bgimg) @pos @repeat;
background: -o-linear-gradient(top, @begin, @end @switch),
@color url(@bgimg) @pos @repeat;
background: -moz-linear-gradient(top, @begin, @end @switch),
@color url(@bgimg) @pos @repeat;
background: linear-gradient(top, @begin, @end @switch),
@color url(@bgimg) @pos @repeat;
}
Initial URL
Initial Description
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.
Initial Title
LESS CSS Multi-Background Mixin
Initial Tags
css, CSS3
Initial Language
CSS