Description

In this example I demonstrate how you can add an img tag and the absolutely position it to the background. In order to make the text more readable, I made the image more subtly by decreasing the opacity and making it blurry. Making the image darker creates more contrast which in turn makes the text easier to read.

In order for the .object-fit property to work in internet explorer you will need to add a polyfill to make it work.

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>

HTML

CSS

JS