SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Do background-image and background-gradient work together?

    I'd like to place a background image icon on a button that has a gradient. But it looks like only one will work:

    With the icon mentioned before the gradient, this will show the gradient, but not the button:

    HTML Code:
    .buttonUndo { color: #000;
    width:100%; float:left;background-color:#aaa; 
    background-repeat:no-repeat;
    background-position:center center;  
    background-image:url(../icons/cancel.png); 
    background:-webkit-gradient(linear,0% 0%,0% 100%,from(#ffff00),color-stop(3%,#fff380),color-stop(50%,#fbb917),color-stop(51%,#d4a017),color-stop(97%,#af7a17),to(#af7a17));
    }


    With the icon and Bg color mentioned after the gradient, this will show the icon on a bg color of #aaa, but not the gradient (leaving the BG color above the gradient, the page BG shows through the button):

    HTML Code:
    .buttonUndo { color: #000;
    width:100%; float:left;background-color:#aaa; 
    background-repeat:no-repeat;
    background-position:center center;  
    background-image:url(../icons/cancel.png); 
    background:-webkit-gradient(linear,0% 0%,0% 100%,from(#ffff00),color-stop(3%,#fff380),color-stop(50%,#fbb917),color-stop(51%,#d4a017),color-stop(97%,#af7a17),to(#af7a17));
    }
    Is it impossible to put them together, or am I going about this wrong?
    Steve Husting

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Linear gradaints are images rendered by the browser so if you want more tha ine image you need ot use the multiple background image approach and separate each image with a comma.

    e.g.
    Code:
    	background-image:url(../icons/cancel.png),-webkit-gradient(linear,0% 0%,0% 100%,from(#ffff00),color-stop(3%,#fff380),color-stop(50%,#fbb917),color-stop(51%,#d4a017),color-stop(97%,#af7a17),to(#af7a17));
    You'd need to repeat that for all the vendor extensions though in separate rules.

    Code:
    background-image:url(../icons/cancel.png),-moz etc.....
    You can't mix vendor extensions in a comma separated list because browsers are ordered to drop out of a rule should they encounter something they don't understand and go to the next line.

    More info here.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    RESOLVED

    I learned something today! That works. Thanks for the help.
    Steve Husting


Bookmarks

Posting Permissions

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