Skip to content

Instantly share code, notes, and snippets.

@hahuaz

hahuaz/background-image-opacity.html

Created February 20, 2022 05:04
Show Gist options
  • Save hahuaz/8e0cc4b0f8ab9bf9c98dc5cf45aec9d0 to your computer and use it in GitHub Desktop.
Save hahuaz/8e0cc4b0f8ab9bf9c98dc5cf45aec9d0 to your computer and use it in GitHub Desktop.
Download ZIP
makes text more readable over the image
Raw
background-image-opacity.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.block {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
margin-bottom: 1rem;
}
/* by using two background images */
#use-two-images .background--image {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: linear-gradient(
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5)
),
url('/brown-bird.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/*by using befero pseuda elements. If you inserting images dynamicly you have to use pseuda elements */
#use-pseudo-elements .background--image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
opacity: 0.5;
}
#use-pseudo-elements .background--image::before {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="use-two-images" class="block">
<div class="container">
<h1>What's up, doc?</h1>
</div>
<div class="background--image"></div>
</div>
<div id="use-pseudo-elements" class="block">
<div class="container">
<h1>What's up, doc?</h1>
</div>
<div
class="background--image"
style="background-image: url('/brown-bird.jpg')"
></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment