Why cant I set opacity to background-image of a div?

Question

I have a list of components which I display like a grid, it looks like this:

So, each item is a component. The thumbnails are just background-images which I set dynamically in my html.

When hovering over them, some text appears on that box. The background image stays. Now my goal is to give that background-image some opacity. Sounds easy, but I dont know how to accomplish this and I tried already several approaches from other posts.

Here is my relevant html code:

<div
  *ngIf="!isFile()"
  class="image-container"
  (mouseenter)="onMouseHover()"
  (mouseleave)="onMouseLeave()"
  (click)="onDokumentClick()"
  [style.background-image]="'url(' + thumbnailPathGenerator() + ')'"
>

and thats my scss:

.image-container {
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: center center;
  box-sizing: border-box;
}

.image-container:hover {
  border-radius: 4px;
  box-sizing: border-box;
}

the url gets generated in the template, thats the challenge...

How can I set an opacity to my image-background?

If you want to make the background-image less opaque then you probably need to put it not as the background to the element but to the element's before pseudo element. You can alter the opacity of that without affecting the opacity of the actual element. — A Haworth, Dec 12 '22 at 13:13
@AHaworth and how would I do that with the :before element when the url gets constructed in the template? — IonicMan, Dec 12 '22 at 13:32
I don't see why the URL getting constructed in the template affects whether the element has a before pseudo element or not - I'm just talking CSS. — A Haworth, Dec 12 '22 at 13:36
https://stackoverflow.com/questions/7241341/can-i-set-an-opacity-only-to-the-background-image-of-a-div — epascarello, Dec 12 '22 at 14:27

score 1 · Accepted Answer · answered Dec 12 '22 at 14:20

In straight JS, HTML, CSS it would be something like this - the CSS variable --bg being set to the background image URL which can be picked up by the pseudo element styling:

const div = document.querySelector('.image-container');

function thumbnailPathGenerator() {
  return 'https://picsum.photos/id/1015/150/150';
}
div.style.setProperty('--bg', 'url(' + thumbnailPathGenerator() + ')');

.image-container {
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
}

.image-container::before {
  content: '';
  background-image: var(--bg);
  background-repeat: no-repeat;
  background-position: center center;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.image-container:hover::before {
  border-radius: 4px;
  box-sizing: border-box;
  opacity: 0.4;
}

<div class="image-container" style="width: 50vmin; height: 50vmin;"></div>

I don't myself use angular, but I believe you can now (since version 9) set a CSS variable like here:

<div
  *ngIf="!isFile()"
  class="image-container"
  (mouseenter)="onMouseHover()"
  (mouseleave)="onMouseLeave()"
  (click)="onDokumentClick()"
  [style.--bg]="'url(' + thumbnailPathGenerator() + ')'">
>

Note: I don't know what your mousenter and out functions do. Are they necessary if you have the opacity being dealt with by CSS?

the mouseenter and mouseleave dont do anything related to styling, you can ignore them — IonicMan, Dec 12 '22 at 14:31
alright i tried it out, the mechanism works but the positioning is wrong. the picture is halfway out of the box and between the 2 boxes. Its because of the position: absolute. How can I let the picture centered inside the boxes as in the picture? — IonicMan, Dec 12 '22 at 15:40
Have you set the div to be postion relative? Can you look in your browser's dev tools inspect facility to see exactly what CSS and HTML has been created? — A Haworth, Dec 12 '22 at 18:52
yup, you are right, my image container didnt have position: relative. After fully copy and pasting your code, it works perfectly. Thank you, I appreciate your help very much! — IonicMan, Dec 13 '22 at 07:51

Why cant I set opacity to background-image of a div?

1 Answers1