CSS gradient above background pattern

Question

I want to make pattern background and a white to black (with transparency) gradient above it. How to work it out and also make it work cross-browser? I'm starting with Mozilla and I've tried to use code below:

background: url(../images/bg_pattern.gif), -moz-linear-gradient( rgba(255, 255, 255, 0.5) 5%, rgba(130, 130, 130, 0.5) 95%

Of course this does not work. So how to work it out? How would the code look for other browsers? Does IE support many backgrounds and transparency? I think it doesn't so I'll ask before your answers - how to work it out for IE?

IE has poorest support for CSS3, and I don't know the extent of it all, but looks like this site might point you to a good starting point. smashingmagazine.com/2010/04/28/… — robx
– robx, Commented May 5, 2011 at 17:06

Joshua · Accepted Answer · 2011-05-05 17:16:29Z

2

You will need two separate elements, one overlaying the other. The element on top sounds like it should be your gradient. Also FYI here is a great tool for generating cross-browser gradients, just launched this week at An Event Apart:

http://www.colorzilla.com/gradient-editor/

answered May 5, 2011 at 17:16

Joshua

3,6031 gold badge30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

smogg Over a year ago

Yeah, its cool app but working with this gradients for all browsers seems very hard so I've made this simplest way. I've made a png graphic and its my background now. But how can I resize the height of bg graphic so its automatically fits my div height?

Shauna Over a year ago

@smogg - That question should probably either be added to your original question, or created in a new question. In short, though, it depends on what your background image looks like (IOW, we need more info).

smogg Over a year ago

@Shauna I just didn't wanted to spam with new beginner question but OK, I'll do it in a second. Thank You.

Nalan Madheswaran · Accepted Answer · 2013-11-10 09:54:02Z

2

Try this:

    background-image: url(images/pattern.png),  -webkit-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  -moz-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  -ms-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  -o-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  radial-gradient(circle at 0% 100%, rgb(20,150,254), rgb(119,117,174));

answered Nov 10, 2013 at 9:54

Nalan Madheswaran

10.6k1 gold badge60 silver badges44 bronze badges

Comments

Marlon · Accepted Answer · 2011-10-23 15:50:01Z

1

I have a working version for everything excepting IE. :/ I don't remember where I found it, so I can not give the proper credit; however, here it is:

background: -webkit-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.8)) fixed, #454040 url(images/grainy2.png) repeat fixed; background: -ms-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed; background: -o-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed; background: -moz-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed;

The first color is your top, the second your bottom, and the third is the color over the pattern (not sure how you would reduce that to transparent). Finally just direct to your pattern.

I'm not entirely sure what ms is for. Like I said, I've been using it for about a few months, but I do not remember the source. I just use them all to make sure they work. Still no fix to IE :/

answered Oct 23, 2011 at 15:50

Marlon

5972 gold badges8 silver badges17 bronze badges

1 Comment

Aigars Matulis Over a year ago

No need for separate layers, Your example worked for me, thanks.

Collectives™ on Stack Overflow

CSS gradient above background pattern

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related