CSS : Div with transparent image at the bottom

Question

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?

Here is jsFiddle link: jsfiddle.net/komunca/Q2NCE/19 . I want to push up that gradient image under the previous div! — mikipero
– mikipero, Commented Dec 6, 2011 at 11:05

Etienne Carrier · Accepted Answer · 2011-12-06 17:58:13Z

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

answered Dec 6, 2011 at 17:58

Etienne Carrier

2401 silver badge6 bronze badges

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

3 Comments

mikipero Over a year ago

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 Over a year ago

sorry how could we remove bottom padding , and use same image? (so background of text at the bottom is that image)?

Etienne Carrier Over a year ago

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 jsfiddle.net/etienne_carre/GEkFn/17

Paul D. Waite · Accepted Answer · 2011-12-06 10:29:31Z

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.

answered Dec 6, 2011 at 10:29

Paul D. Waite

99.5k57 gold badges204 silver badges275 bronze badges

1 Comment

mikipero Over a year ago

Here is the link jsfiddle.net/komunca/Q2NCE/19

Community · Accepted Answer · 2017-05-23 12:31:35Z

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

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered May 31, 2016 at 16:08

Gonzalo

766 bronze badges

1 Comment

Adam Over a year ago

From the Help Center: 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.

Collectives™ on Stack Overflow

CSS : Div with transparent image at the bottom

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related