5 Minute Tour of CSS3 Background Gradients: Listing 1.
CSS background
gradient syntax for different
rendering engines.
.bg
{
/* fallback color */
background-color: #000000;
/* fallback image */
background: url(http://johnpapa.net/files/downloads/images/bg.png);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0, 0, 0)),
color-stop(0.46, rgb(11, 111, 211)),
color-stop(0.46, rgb(0, 0, 0)),
color-stop(0.50, rgb(0, 0, 0)),
color-stop(0.50, rgb(11, 111, 211)),
color-stop(1, rgb(0, 0, 0))
);
background: -moz-linear-gradient(
center bottom,
rgb(0, 0, 0) 0%,
rgb(211, 111, 111) 46%,
rgb(0, 0, 0) 46%,
rgb(0, 0, 0) 50%,
rgb(211, 111, 111) 50%,
rgb(0, 0, 0) 100%
);
}
About the Author
John Papa is a Microsoft Regional Director and former Microsoft technical evangelist. Author of 100-plus articles and 10 books, he specializes in professional application development with Windows, HTML5, JavaScript, CSS, Silverlight, Windows Presentation Foundation, C#, .NET and SQL Server. Check out his online training with Pluralsight; find him at johnpapa.net and on Twitter at twitter.com/john_papa.