While creating landing pages, we often encounter the issue that the background image of the banner is too dark and any content added to the banner is not visible clearly.
Consider the following code:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-image: url('img_girl.jpg');
padding: 100px 20px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background image <br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>
</body>
</html>
We cannot see the text clearly as the image's contrast is high. We try to reduce the opacity of the background image by adding opacity: 0.5 to the style.
But this reduces the opacity of the text/content as well.
We can solve the issue using 2 different approaches:
Approach 1: Using Wrapper Container
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
background-image: url("img_girl.jpg");
background-repeat: no-repeat;
}
p{
width: 100%;
heigth: 100%;
padding: 100px 20px;
background-color: rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<h2>Background Image</h2>
<div class="wrapper">
<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>
</div>
</body>
</html>
Approach 2: Using Linear Gradient
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 100px 20px;
background-image: url("img_girl.jpg"), linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5));
background-blend-mode: overlay;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>
</body>
</html>
Follow us on Instagram
Top comments (0)