[prezaeis]

Hi guys,

Im trying to put a CSS gradient effect on my websites menu buttons
Now ive got it working perfectly on Firefox but can get it to show on Chrome or Safari (havent checked IE as im on a mac)

Can someone help me iv been pulling my hair out all night, the code im using is below:


background-color: #343434;
background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), url("../images/nav-item-pattern.png");
background-image: -webkit-gradient(center top , rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), url("../images/nav-item-pattern.png");

appreciated guys

This post has been edited by prezaeis: 21 January 2012 - 06:17 AM

[simplypixie]

I may be wrong but you set gradients using background: not background-image: and I am not sure why you want a gradient and an image at the same time (or if you can even do that). Plus you need to indicate what type of gradient it is.
See Here

[prezaeis]

simplypixie, on 21 January 2012 - 07:22 AM, said:

I may be wrong but you set gradients using background: not background-image: and I am not sure why you want a gradient and an image at the same time (or if you can even do that). Plus you need to indicate what type of gradient it is.
See Here

the image im laying on top is just a transparent png file
its sort of a dusty texture, makes the buttons that little bit more shiny and funky!

thing is my code works perfectly in firefox, so just need to see what needs doing for other browsers

[dansk]

Try this:

#dustybutton { 
    background: url('../images/nav-item-pattern.png') no-repeat 0 0, rgb(30,87,153);
    background: url('../images/nav-item-pattern.png') no-repeat 0 0, 
                -moz-linear-gradient(center top , rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    background: url('../images/nav-item-pattern.png') no-repeat 0 0, 
                -webkit-gradient(center top , rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}

I've not tested it mind.. but if it doesn't work, you could try the older webkit format using color stops.

[prezaeis]

thank you, finally went with this which worked, the above example didnt work

background-color: #343434;

    background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */