0

I have a following situation:

Div has to have a solid color on top, and then at the bottom thee should be a transparent image 1px wide. (So final look should be that I have a gradient from top to bottom of div) When I put :

background: #fff url("../../images/bck1px.png") repeat-x scroll center bottom transparent;

white color is shown over transparent image

I have to do this in CSS2 style!

Can anybody help?

mikipero
  • 420
  • 1
  • 6
  • 27
  • Here is jsFiddle link: http://jsfiddle.net/komunca/Q2NCE/19/ . I want to push up that gradient image under the previous div! – mikipero Dec 06 '11 at 11:05

3 Answers3

1

Here is a link... maybe this is what you want to do.

If yes, the trick is to use the image and have it align in the bottom of the div and repeat horizontally. The clear is there to make sure to push the bottom of you container div.

http://jsfiddle.net/etienne_carre/GEkFn/

Good luck

Etienne Carrier
  • 240
  • 1
  • 6
  • but my image is different it is white on top and transparent on the bottom, and in this way color defined in css will override image! (because it is transparent) – mikipero Dec 06 '11 at 23:37
  • sorry how could we remove bottom padding , and use same image? (so background of text at the bottom is that image)? – mikipero Dec 07 '11 at 08:53
  • Here is another link, the shade at the bottom may not be exactly like yours, but I think it work now. What I did is that I created a 2px by 2000px height white image with a transparent shade at the bottom. So you just have to aligne the background image at the bottom of the div repeat it horizontaly and as long as your div doesn't exceed 2000px height you will be ok. I could have made it 4000 if needed. Here is the link http://jsfiddle.net/etienne_carre/GEkFn/17/ – Etienne Carrier Dec 07 '11 at 14:02
0

If someone ever arrives here, future has finally come and there is better ways to do it.

Please refer to the following links for a CSS method: Gradient opacity on the bottom of div

Community
  • 1
  • 1
Gonzalo
  • 76
  • 6
  • From the [Help Center](http://stackoverflow.com/help/how-to-answer): Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. – Adam May 31 '16 at 16:26
0

It’s not entirely clear what you’re asking — a transparent image is transparent, so it won’t create a gradient.

In the code you’ve posted, you have applied a white background colour as well as an image (background: #fff url...). If you leave out the colour (background: url...) you shouldn’t get white any more. I don’t know if that’ll solve your problem.

If you could post all the CSS applied to the <div>, that might help.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270