Parallax Site with darken image not text

Question

I am trying to create a parallax webpage with multiple images but I want to make the images darken and the text regular. My images and text are all in the same div since its parralax but maybe theres another way?

 .pimg1, .pimg2, { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; filter: brightness(50%); height: 100vh; } .pimg1 { background-image: url('https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg'); min-height: 100%; } .pimg2 { background-image: url('https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg'); min-height: 100%; }

 <body> <div> <img src="https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg" class="pimg1"> <div class="ptext"> <h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br> </div> </div> <div> <div class="pimg2"> <div class="ptext"> <h1 class="openSans"><strong>Who am I</strong></h1> <br> </div> </div> </body>

Answer 1

Use pseudo elements ::before or ::after

Here you go. Try this

 body{width:100%;} .pimg1{ position:relative; width:100%; max-width:48%; margin-right:1%; float:left; height:100vh; margin-bottom:100px; } .pimg1::before{ content:""; background:url('https://www.w3schools.com/html/clouds.jpg') no-repeat fixed center; background-size:cover; position:absolute; top:0; left:0; height:100%; width:100%; filter:brightness(50%); z-index:-1; }

 <body> <div class="pimg1"> <div class="ptext"> <h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br> </div> </div> <div class="pimg1"> <div class="ptext"> <h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br> </div> </div> <p style="padding-top:30px;">Original Image</p> <img src="https://www.w3schools.com/html/clouds.jpg"> </body>

Answer 2

You may looking something like that below:

 <!DOCTYPE html> <html> <head> <title></title> <style> html, body { height:100%; padding:0; margin:0; } .pimg1, .pimg2 { position:relative; background-position:center; background-size:cover; background-repeat:no-repeat; background-attachment: fixed; } .pimg1::after, .pimg2::after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:0; display:block; } .pimg1 { background-image:url('https://via.placeholder.com/550'); min-height: 100%; } .pimg2{ background-image:url('https://via.placeholder.com/550'); min-height: 100%; } </style> </head> <body> <div class="pimg1"> <div class="ptext"> <h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br> </div> </div> <div class="pimg2"> <div class="ptext"> <h1 class="openSans"><strong>Who am I</strong></h1> <br> </div> </div> </body> </html>

Parallax Site with darken image not text

Question

2 answers

solution1
2 ACCPTED 2018-11-15 05:42:51

solution2
1 2018-11-15 05:44:52

Parallax Site with darken image not text

Question

2 answers

solution1 2 ACCPTED 2018-11-15 05:42:51

solution2 1 2018-11-15 05:44:52

solution1
2 ACCPTED 2018-11-15 05:42:51

solution2
1 2018-11-15 05:44:52