Release your artistic self with CSS
Sometimes it’s nice to have a background image, but that image is just too complex or dark to write over. The solution can be to fade it from bottom to top and at an angle and then put your text on the left side. We can do this with CSS.Create a div. Add a background image in this way.
#divWithBackground {
background-image: linear-gradient(-60deg, transparent 10%, white 70%), url('http://example.com/myImg.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position: right bottom;
}The linear-gradient function takes three parameters. The first specifies the angle. The negative angle indicates starting from the bottom, but you can experiment with changing the angle. The second parameter is a pair. The first element of the pair is the color and the second element is the point at which the fade starts. Here is starts fading from transparency at 10% along the angle and fades to white. The third parameter give the color to fade to and at what point it will have completely faded. This example fades completely to white at 70% of the way to the top, left.
If you don’t have enough text for your image you may need to set a height. Also, be sure to put a margin on your text. This example uses margin-right:40%.