I have a website using multiple background images, which works fine, expect for IE, but I have a media query to pull a single background image for IE. Which I'm happy enough with for now.

I added a css3 gradient behind the images. After initially testing in chrome, I found it only works if I remove the code for other browser support.

Its annoying as I can only get what I want for 1 browser at a time, anybody any ideas why this is happening?

Here is my css:

This doesnt work:
Code:
body{
		font:14px 'questrialregular', Arial, Helvetica, sans-serif;
		margin:0;
		width:100%;
		color:#797979;
		background:url(../img/toptree.png), url(../img/treetopright.png), url(../img/chinatower.png),  url(../img/subway.png),  url(../img/ifc.png);
		background-attachment:fixed;
		background-position:top right, top left, center bottom,  bottom right,  left bottom;
		background-repeat:no-repeat;
		/* IE10 Consumer Preview */ 
		background: -ms-radial-gradient(center, circle farthest-side, #FFFFFF 0%, #00A3EF 100%);
		/* Mozilla Firefox */ 
		background: -moz-radial-gradient(center, circle farthest-side, #FFFFFF 0%, #00A3EF 100%);
		/* Opera */ 
		background: -o-radial-gradient(center, circle farthest-side, #FFFFFF 0%, #00A3EF 100%);
		/* Webkit (Safari/Chrome 10) */ 
		background: -webkit-gradient(radial, center center, 0, center center, 477, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
		/* Webkit (Chrome 11+) */ 
		background: -webkit-radial-gradient(center, circle farthest-side, #FFFFFF 0%, #00A3EF 100%);
		/* W3C Markup, IE10 Release Preview */ 
		background: radial-gradient(circle farthest-side at center, #FFFFFF 0%, #00A3EF 100%);
		
		display:block;	
	}
This works for Chrome only:
Code:
body{
		font:14px 'questrialregular', Arial, Helvetica, sans-serif;
		margin:0;
		width:100%;
		color:#797979;
		background:url(../img/toptree.png), url(../img/treetopright.png), url(../img/chinatower.png),  url(../img/subway.png),  url(../img/ifc.png);
		background-attachment:fixed;
		background-position:top right, top left, center bottom,  bottom right,  left bottom;
		background-repeat:no-repeat;
		/* Webkit (Chrome 11+) */ 
		background: -webkit-radial-gradient(center, circle farthest-side, #FFFFFF 0%, #00A3EF 100%);
		
		display:block;	
	}
Any help is always appreciated!