Split Background Color

A "split" background color being done purely with a CSS gradient applied by a class.

by Ryan Rutkin

HTML

<div class="header gradient" >I have a split background color!</div>

CSS

.gradient {
    background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
			background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
			background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
			background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
}

.header {
    width: 90%;
    /*height: 50px;*/
    max-height: 25%;
    text-align:center;
    padding: 2% 5% 2% 5%;
    vertical-align: middle;
    font: 14px "Open Sans", Verdana, sans-serif;
    color: white;
}