How do I lay my linear-gradient over an img element in css

Question

How do I lay my linear-gradient over an img element in css

33 Views Asked by Lulatsch3841 At 22 March 2024 at 12:33

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>

Original Q&A

There are 2 best solutions below

**Mikett30** · Answer 1 · 2024-03-22T12:48:25.030000

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>

**Hari narayan** · Answer 2 · 2024-03-22T12:55:49.877000

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>

How do I lay my linear-gradient over an img element in css

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in VISUAL-WEB-DEVELOPER

Trending Questions

Popular # Hahtags

Popular Questions