Monthly Archives: July 2014

CSS backround image w/color gradient

Something I wanted to fix, but never had the time.

The css code:

/* =Add color gradient to background
 -------------------------------------------------------------- */
 body.custom-background {
	background-color: #EDE1E3;
/* fallback */
	background-image: url('http://www.rapunzelsdelight.com/wordpress/wp-content/uploads/2014/01/background-rose7.png');
/* fallback */
	background-image: url('http://www.rapunzelsdelight.com/wordpress/wp-content/uploads/2014/01/background-rose7.png'), -webkit-gradient(linear,left top,left bottom,from(white),to(#EDE1E3));
/* Saf4+, Chrome */
	background-image: url('http://www.rapunzelsdelight.com/wordpress/wp-content/uploads/2014/01/background-rose7.png'), -webkit-linear-gradient(top,white,#EDE1E3);
/* Chrome 10+, Saf5.1+ */
	background-image: url('http://www.rapunzelsdelight.com/wordpress/wp-content/uploads/2014/01/background-rose7.png'), -moz-linear-gradient(top,white,#EDE1E3);
/* FF3.6+ */
	background-image: url('http://www.rapunzelsdelight.com/wordpress/wp-content/uploads/2014/01/background-rose7.png'), -ms-linear-gradient(top,white,#EDE1E3);
/* IE10 */
	background-image: url('http://www.rapunzelsdelight.com/wordpress/wp-content/uploads/2014/01/background-rose7.png'), -o-linear-gradient(top,white,#EDE1E3);
/* Opera 11.10+ */
	background-image: url('http://www.rapunzelsdelight.com/wordpress/wp-content/uploads/2014/01/background-rose7.png'), linear-gradient(to bottom,white,#EDE1E3);
/* W3C */
}

The post CSS backround image w/color gradient appeared first on Rapunzel's Delight.