The trick is how we set the position property of the elements and also how we create the transparent background.
HTML
Let’s start with the simple HTML container with the image and texts. To set the seperate style for the texts, we will put the texts in a sub-container.
That will just show an image and texts below the image. Like this:
CSS
Let’s set the HTML document’s box-sizing property to border-box. It will keep the texts sub-container inside the main container and will not let it spread out.
Also, set the container’s position property to relative and set a maximum width. You can adjust the width as per your requirements.
The last and the most important part is to add an appropriate style for the texts container. We need to set the texts container’s position property to absolute. You can adjust the position by changing the value of top property. Adjust the background-color and opacity by changing the values inside rgba().
Final result
background-image position text transparent
