Posted By

dtigraphics on 04/18/11

Tagged

css
CSS3

Versions (?)

Last Edited at 04/18/11 08:37am

Statistics

Viewed 721 times

Favorited by 0 user(s)

Related snippets

LESS CSS Multi-Background Mixin

/ Published in: CSS

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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

.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;
}