Background linear gradient not working on

Question

I've added a background linear gradient on my image, but regardless of what I try, it never actually shows. Can anyone suggest where I'm going wrong?

.card {
  height: 500px;
}

.card img {
  height: 100%;
  width: 100%;
  background: linear-gradient(280.03deg, rgba(44, 39, 39, 0.76) 17.44%, rgba(44, 39, 39, 0) 53.16%);
}

.card .content {
  position: absolute;
  bottom: 32px;
  color: white;
}

<div class="container">
  <div class="card">
    <img src="https://placekitten.com/1440/671" />
    <div class="content">
      <p>
        Why does my linear gradient background not work?
      </p>
    </div>
  </div>
</div>

A background on an image? What do you expect to see? The image is the same size as the DOM element, so the img is above the background. — 0stone0, May 23 '23 at 13:04
Does this answer your question? [CSS background image on top of ](https://stackoverflow.com/questions/28710659/css-background-image-on-top-of-img) — DBS, May 23 '23 at 13:04
"*Why does my linear gradient background not work?*" - it does work, it's right there (visible before the image loads); what were you expecting? If you add some padding to the `` then you'll see it, if the image is there then - obviously, and by design - the background is in the *background* which is hidden by the foreground. — David Thomas, May 23 '23 at 13:09
Not a fix but note that the [](https://html.spec.whatwg.org/dev/embedded-content.html#the-img-element) tag does not use and does not need a closing slash and never has in any HTML specification. — Rob, May 23 '23 at 23:57

Johannes · Answer 1 · 2023-05-23T13:12:04.843

Your image has height: 100%; width: 100%; defined in its CSS rule – there is no space for a background to appear, the image fills the container completely, and even if it wouldn't, the background only applies to the image itself in its defined size, which would always "cover" the background.

The only case where a background color or gradient would appear that is defined for the image itself would be when the image has transparent areas in it (which would also require an according image format like .PNG)

score 0 · Answer 2 · answered May 23 '23 at 13:11

The background is actually displayed behind your image. You can see it in a split second right before the image loads. In order to see the gradient over the image, you'd have to position an absolute div over your image like this:

.image-container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)); /* Adjust the colors and opacity as needed */
  pointer-events: none;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

<div class="image-container">
  <img src="https://placekitten.com/1440/671" alt="Your Image">
  <div class="overlay"></div>
</div>

Gerrit Bertier · Answer 3 · 2023-05-23T13:40:57.547

As stated in another answer, the background is shown behind the actual image.

Solution

You could create an overlay using a CSS pseudo element (::before or ::after). This prevents you from having to add extraneous HTML elements.

See the following snippet:

.card {
  height: 500px;
  position: relative; // Allows absolute positioning of the pseudo element
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(280.03deg, rgba(44, 39, 39, 0.76) 17.44%, rgba(44, 39, 39, 0) 53.16%); // Background is defined on the pseudo-element, not on the image
  z-index: 1; // Place the pseudo element above the content
}

.card img {
  height: 100%;
  width: 100%;
}

.card .content {
  position: absolute;
  bottom: 32px;
  color: white;
}

<div class="container">
  <div class="card">
    <img src="https://placekitten.com/1440/671" />
    <div class="content">
      <p>
        Why does my linear gradient background not work?
      </p>
    </div>
  </div>
</div>

Alternative solution

If you don't need to have an img element in the HTML (i.e. in case the image has no actual semantic value to the page, but is purely used for styling), it's recommended to have the image as a background in CSS. You can then use multiple backgrounds via CSS to have both the image and the gradient as a background.

.card {
  height: 500px;
  background: linear-gradient(280.03deg, rgba(44, 39, 39, 0.76) 17.44%, rgba(44, 39, 39, 0) 53.16%), url('https://placekitten.com/1440/671'); // Multiple CSS backgrounds
}

.card .content {
  position: absolute;
  bottom: 32px;
  color: white;
}

<div class="container">
  <div class="card">
    <div class="content">
      <p>
        Why does my linear gradient background not work?
      </p>
    </div>
  </div>
</div>

Background linear gradient not working on

3 Answers3

Solution

Alternative solution