Web: Dynamic transparent gradient

Question

How can I make transparent gradient on my webpage like that on the picture? I can't use png for that, because images are loaded from server dynamically and will be scrolled:

enter image description here

Scroller is written in JS. I don't want to use flash for that gradient.

EDIT: I must have possibility to change that background (by user) and it must fit screen (about 95%). There is not possible to make background mask over the scroller. :(

PS: Sorry for my English.

Thanks :)

http://stackoverflow.com/questions/2293910/css3-transparency-gradient — epascarello, Jan 14 '12 at 16:21

score 2 · Accepted Answer · answered Jan 14 '12 at 16:24

2

you know the background image, what you can do duplicate that image, cut the middle part using photshop rectangular marquee tool but select feather to like 20px. Then you can you use that image as a mask. Does it make any sense?..

Look at this: http://img836.imageshack.us/img836/8441/maskki.jpg

answered Jan 14 '12 at 16:24

Adaz

1,627
12
14

Good idea, thanks. I will try to find JS/PHP image processing library for that. – xdonko Jan 14 '12 at 17:28

Web: Dynamic transparent gradient

1 Answers1