CODEWITHSUNDEEP
cssbuttongradient
Justin Meltzer
Justin Meltzer

Reputation: 13548

Get gradient to work with background color

Right now I have this CSS for a button:

background: #19558D url(../images/gradient.gif) repeat-x top left;

The gradient appears, but the background color doesn't. When I reload the page, the color appears for a split second, but then disappears to the gradient. How can I get both of them to work?

Upvotes: 0

Views: 464

Answers (2)

JCOC611
JCOC611

Reputation: 19709

Ok, so you have several options:

1. Use Only Images:

You can do the job by editing the gradient so that it looks exactly how you like it to be, without any new CSS. (This would be the one you used to solve the problem).

2. Use Image on the top and the rest in solid color:

element{ background:#000 (url) top left repeat-x; }

This will place the image in url at the top, and make the rest of the element of a certain solid color. Be aware that if the image covers all of the element and isn't transparent, then the solid color will not be visible.

3. Make the gradient transparent/alpha:

If the gradient covers all of the element, you can make it transparent, or semi transparent, so that the CSS background-color is visible behind it. For example, if you make a gradient that goes from black to transparent, and then add a white CSS bg, then you will get a black to white gradient. Be aware that the only images that will work with this method are .png ones because they are the only ones that support alpha levels (partial transparencies).

Upvotes: 1

BerggreenDK
BerggreenDK

Reputation: 5004

is the GIF transparent? I use PNG format as PNG-24 allows alphablending masks, where as GIF only supports transparent or not (1/0)

But I think you need to post a link to it or a image of what it looks like, including the GIF. We need some pixels specs, such as width and height to fully understand the problem.

Upvotes: 0

Related Questions