0

This is how my webpage looks like: enter image description here

I used the following image as the background: enter image description here

How can I have black transparent overlay on the image, so it looks like the following: enter image description here

Here is my html and CSS code:

<!DOCTYPE html>
<html>
   <head>
       <title>Background Image</title>
       <meta charset="utf-8"></meta>
       <meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>

   <style type="text/css">
    body{
    margin-top: 53px;
    }

    .jumbotron {
    background-image: url("background1.jpg");
    text-align: center;
    height:522px;
    background-size: cover;
    }

   </style>

   <body>                 
    <section id="page-top">
            <div class="jumbotron">
              <p data-aos="zoom-out" data-aos-delay="500" style="font: 120px Verdana,sans-serif; margin-top: 35px; color: black; animation-duration: 2s; animation-iteration-count:infinite; animation-delay: 1s;" class="lead pulse mb-5 green pb-5 aos-init aos-animate">Matt Williams</p>
              <p data-aos="zoom-out" data-aos-delay="500" style="font: 20px Georgia,serif;font-style:italic; line-height: 1.6; color:white;animation-duration:2s;animation-iteration-count:infinite; animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate d-none d-lg-block">Lorem Ipsum.<br>Lorem Ipsum.</p>
            </div>
        </section>
   </body>
</html>
Mx.
  • 143
  • 11

1 Answers1

2

You can add a transparent gradient before the url background:

.jumbotron {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("background1.jpg");
}

For example:

body {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://picsum.photos/id/896/640/480);
}
Hao Wu
  • 17,573
  • 6
  • 28
  • 60