Overlay
Add an overlay between your background-image and element text for a better contrast.
Dark
Overlay 20%
linear-gradient(rgba(0,0,0,0.2),rgb(0,0,0,0.2))
Overlay 50%
linear-gradient(rgba(0,0,0,0.5),rgb(0,0,0,0.5))
Overlay 90%
linear-gradient(rgba(0,0,0,0.9),rgb(0,0,0,0.9))
Light
Overlay 20%
linear-gradient(rgba(255, 255, 255,0.2),rgb(255, 255, 255,0.2))
Overlay 50%
linear-gradient(rgba(255, 255, 255,0.5),rgb(255, 255, 255,0.5))
Overlay 90%
linear-gradient(rgba(255, 255, 255,0.9),rgb(255, 255, 255,0.9))
Gradient Overlay
Add an linear gradient between your background-image and element text for a better contrast.
Top
Top 50%
linear-gradient(rgba(0,0,0,0.5), rgb(0,0,0,0))
Top 80%
linear-gradient(rgba(0,0,0,0.8), rgb(0,0,0,0))
Top 100%
linear-gradient(rgba(0,0,0,1), rgb(0,0,0,0))
Bottom
Bottom 50%
linear-gradient(rgba(0,0,0,0), rgb(0,0,0,0.5))
Bottom 80%
linear-gradient(rgba(0,0,0,0), rgb(0,0,0,0.8))
Bottom 100%
linear-gradient(rgba(0,0,0,0), rgb(0,0,0,1))