www.webdeveloper.com
Results 1 to 4 of 4

Thread: background images and a gradient in css3

  1. #1
    Join Date
    Jul 2012
    Posts
    14

    Lightbulb background images and a gradient in css3

    I have multiple backgrounds with a gradient, and its working for Firefox, Chrome and Safari, with certain media querys for different size screens.

    As usual the problem is Internet Explorer. I used to have a conditional stylesheet for IE where I just loaded a single background image, but as far as I know, IE10 wont support < !--If IE--> in my CSS.

    Ideally I would like to get the css3 gradient and separate background images working on all browsers but I'v been happy to just use a single background image for all IE browsers until IE10 stopped using conditional style sheets.

    I think I need to combine the IE with the moz and webkit background css on the body. But so far I cant get anything to work. Any help would be much appreciated..


    CSS in main style.css
    Code:
    body{
        font:14px 'questrialregular', Arial, Helvetica, sans-serif;
        margin:0;
        width:100%;
        color:#797979;
    
        background-image: 
        url(../img/bknd_img1.png),
        url(../img/bknd_img2.png),
        url(../img/bknd_img3.png),
        url(../img/bknd_img4.png),
        url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));
    
        background-image: 
        url(../img/bknd_img1.png),
        url(../img/bknd_img2.png),
        url(../img/bknd_img3.png),
        url(../img/bknd_img4.png),
        url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);
    
        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;
        display:block;}
    CSS for IE
    Code:
    font:14px 'questrialregular', Arial, Helvetica, sans-serif;
        margin:0;
        width:100%;
        color:#797979;
    
        background-image: url('img/bknd_full_img.jpg');
        background-attachment:fixed;
        background-position:center top;
        background-repeat: no-repeat;
        background-color:#fff;
        display:block;  
    }

  2. #2
    Join Date
    Mar 2011
    Posts
    1,141
    IE10 will support CSS gradients, but prior versions are limited to the Microsoft (linear) gradient filter.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Dec 2012
    Location
    Cape Town, South Africa
    Posts
    12
    Quote Originally Posted by rtrethewey View Post
    IE10 will support CSS gradients, but prior versions are limited to the Microsoft (linear) gradient filter.
    Wonderful IE. Enough to pull one's hair out.

  4. #4
    Join Date
    Dec 2012
    Posts
    5
    For IE10 you can just use regular CSS gradients, without prefix. You will need to update your syntax to the new version, but you should do that for other browsers too. This will also make it work for Opera, as you don't include the -o- prefix in your CSS either. If you want to keep the old syntax, you should add a -ms- and a -o- version for IE and Opera respectively.

    You can see some info on the Gradient syntax change on my blog: http://generatedcontent.org/post/379...updateyourcss3

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