[RESOLVED] cross browser support of multiple background images on top of a CSS3 gradient

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!

Do you have a link to the site, showing the issue?

I'd first suggest that you specify the 'background-image' property when appropriate (as opposed to simply 'background') and combine your vendor-specific gradient images with the url()s for each vendor's setting, then be sure to have the standards support code come last in the list.

Code:

---


body {

background-image:
                url(../img/toptree-opt.png),
                url(../img/treetopright-opt.png),
                url(../img/chinatower-opt.png),
                url(../img/subway-opt.png),
                url(../img/ifc-auto-dirt.png), linear-gradient(to top, #ffffff 0%, #509deb 100%); /* IE10 */
               
                background-image:
                url(../img/1.png),
                url(../img/2.png),
                url(../img/3.png),
                url(../img/4.png),
                url(../img/5.png), -ms-linear-gradient(bottom, #ffffff 0%, #509deb 100%); /* IE10 Preview on windows 7 */
               
                background-image:
                url(../img/1.png),
                url(../img/2.png),
                url(../img/3png),
                url(../img/4.png),
                url(../img/5.png), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb)); /* Safari, Chrome */
               
                background-image:
                url(../img/1.png),
                url(../img/2.png),
                url(../img/3.png),
                url(../img/4.png),
                url(../img/5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);  /* Firefox */
               
                background-attachment:fixed;
                background-position:top right, top left, center bottom,  bottom right,  left bottom;
                background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
                background-color:#509deb;

}

---