Often, we want to set a background image on our website. However, a common issue arises when the background image reduces the visibility of the text over it. This is a frequent problem for web developers. In this article, we will learn how to adjust image transparency so that the text over the image remains fully visible.
For this example, we are going to set a background image for a block that contains both an image and text. First, we create a <div>, and inside it, we place two more <div> elements—one for the image and one for the paragraph. We assign a class named featuredItems to the parent <div>.
For the CSS part, we first import the image and then set the position as relative.
Next, we style and set CSS properties using the pseudo-element ::before. This adds CSS properties before the actual content block begins. We must set content: "", use position: absolute, and align the pseudo-element with top: 0 and left: 0. To make the pseudo-element cover the whole <div>, we use width and height. Finally, we set transparency using background-color with an rgba value.
We then style the paragraph inside the featuredItems class, using z-index to bring the paragraph and image to the front.
