skip to Main Content

I tried many ways to lay a linear gradient over an image element and yet nothing has worked !

I tried using z-index and asked chat gpt but both didn’t help. Could you help me out and explain why it didnt work?

div {
  background: linear-gradient(180deg, black, transparent);
  width: 100%;
  height: 1000px;
  z-index: 2;
}

img {
  z-index: 1;
}
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- 
 scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="mydiv">
    <img src="https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
  </div>
</body>

</html>

2

Answers


  1. Just edited your example a little bit. You need to move your image outside of the div, and position the div over top of the image. Use the example below and modify as needed.

     div{
                background: linear-gradient(180deg, black, transparent
                );
                width: 200px;
                height: 200px;
                z-index: 2;
                position: absolute;
                top: 0px;
                left: 0px;
            }
            img{
                 width: 200px;
                 height: 200px;
                 z-index: 1;
                 position: absolute;
                 top: 0px;
                 left: 0px;
            }
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial- 
     scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <img src="https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
        <div class=“mydiv”></div>
    </body>
    </html>
    Login or Signup to reply.
  2. Try This

    <!DOCTYPE html>
        <html lang="en">
           <head>
              <meta charset="UTF-8" />
              <meta
                 name="viewport"
                 content="width=device-width, initial- 
          scale=1.0"
              />
              <title>Document</title>
              <style>
                 * {
                    padding: 0;
                    margin: 0;
                 }
                 .mydiv {
                    position: absolute;
                    background: linear-gradient(180deg, black, transparent);
                    width: 100%;
                    height: 100vh;
                    z-index: 1;
                 }
        
                 img {
                    position: absolute;
                 }
              </style>
           </head>
        
           <body>
              <div class="mydiv"></div>
              <img
                 src="https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              />
           </body>
        </html>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search