/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Nov 12.2012

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;
}
[/CODE]

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;
}
[/CODE]

Any help is always appreciated!

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@dstoreyJan 09.2013 — Do you have a link to the site, showing the issue?
Copy linkTweet thisAlerts:
@rtretheweyJan 10.2013 — 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.
Copy linkTweet thisAlerts:
@conor909authorJan 10.2013 — [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;

}
[/CODE]
×

Success!

Help @conor909 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...