CSS let background-image overwrite part of background-color

Question

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.

Answer 1

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

background: linear-gradient(to right, black, white)