www.webdeveloper.com
Results 1 to 4 of 4

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

Hybrid View

  1. #1
    Join Date
    Jul 2012
    Posts
    14

    resolved [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!

  2. #2
    Join Date
    Dec 2012
    Posts
    5
    Do you have a link to the site, showing the issue?

  3. #3
    Join Date
    Mar 2011
    Posts
    1,136
    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.
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Jul 2012
    Posts
    14

    Post Appreciate all the replys. This solved it for me if anyone needs the code..

    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;
    
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles