There is an overlay layer on the image which we can put a darker color on the image. Text is horizontally and vertically centered, written on top of the overlay layer, so it is visible and not affected by the overlay.
HTML page (with Bootstrap included):
The downside of this, as far as I notice, that the background image does not stay fixed on mobile.
Result with HTML and CSS with a valid image:
Leave a Reply