0

I have a division that I gave a black background color. The body of the HTML is yellow. What I want is the first black div to fade out.

I wanted to do this using a background-image. The background image is a png file that is black as well, but has a transparency from 0% on the left and gradually goes to 100% on the right.

If I also add this background-image to my division, it remains black.

I understand why this happens, because the image is transparent, and behind that image is still the black color. I get that. Is there a way to do it though? Is there a way to disregard a background-color where a background-image is positioned?

I rather don't create extra html elements if it ain't necessary.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Nicky Smits
  • 2,980
  • 4
  • 20
  • 27
  • please post the code of what you have tried so far. Even if it is not working like expected. Just post a jsFiddle of it and make it easy to answer – Nico O Mar 17 '14 at 16:30
  • 1
    You could use a gradient as background-image in the first place (use this generator: http://www.colorzilla.com/gradient-editor/). Or maybe a gradient mask (http://stackoverflow.com/questions/9525215/using-css-can-you-apply-a-gradient-mask-to-fade-to-the-background-over-text) – yunzen Mar 17 '14 at 16:30

1 Answers1

0

You should use the linear-gradient CSS function for your div.

background: linear-gradient(to right, black, white)
Math
  • 2,399
  • 2
  • 20
  • 22