Question 44213 in Html Question posted in
Some basic documentation can be found here.

gradient overlay to a background image – Html

I am new to css and doing the best i can to learn it. I am building a test website where i want a gray overlay Menu over my background image. More like a see through overlay. I looked online and couldnt find what I needed.

below is a picture of what I need

enter image description here

as you can see in the picture above, there is a background image of pink roses.
then there is a gray overlay with a menu. In the gray area, you can see the background image a little. I would like to mimic the same as the picture above in css or html. can someone please give me sample code on how to accomplish my request. if you know any tutorial that can guide me accomplish whats on the picture, please send and i will appreciate. thanks in advance

Tags:

2

Answers


  1. 0

    Like above comment says you need to post some code, to help others understand. But in general if you want to overlay the image to make it darker you can use:

        background-image: linear-gradient(
        rgba(23, 23, 23, 0.6),
        rgba(23, 23, 23, 0.6)
       ),url(myImage.jpg);

    It will darken your image. You can adjust opacity (0.6) to make it darker or lighter, also you can change the overlay color. Put your image path inside url.

    Or use what above comment says if you have a separate container that overlays background.
    It all depends on what you want. Another example:

    .overlay {
    width: 60%;
    height: 60%;
    background-color: #80807d23;
    backdrop-filter: blur(2px);
}

<div class="overlay"></div>
    Login or Signup to reply.
  2. 0

    Here is a full example. It’s pretty simple code, so hopefully its easy to understand, but if not, leave a comment with your questions.

    .background{
  width: 500px;
  height: 300px;
  background-image: url("https://images.squarespace-cdn.com/content/v1/5681a12557eb8de39669d2f9/1584782895817-PX5ZBDNB5S6ASRQ0H46P/image-asset.jpeg");
  
  
  /* centers the children of this element */
  display: flex;
  align-items: center;
  justify-content: center;
}


.overlay{
  width: 300px;
  height: 150px;
  background-color: rgba(255, 255, 255, .6);
}
    <div class="background">
  <div class="overlay">
    you can put whatever content you want here
  </div>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search