2

I'm trying to achieve color overlay on background images as demonstrated at w3school, but I want to do it for a dynamically set background-image (I'm currently working with VueJS).

What I try to achieve:

<div class="hero-image">...</div>

.hero-image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.png');
    background-size: cover;
}

First attempt - extract background-image to html:

Problem: This will override the color information and only use the background-image settings. I also tried with background attribute instead of background-color in the css code.

<div class="hero-image" :style="{ backgroundImage: `url('${image}')`}">...</div>

.hero-image {
    background-color: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    background-size: cover;
}

Second attempt - extract the complete background attribute:

Problem: This works except the background-size attribute is now ignored. I tried to add cover to the background-attribute in the html but it does not work either.

<div class="hero-image" :style="{ 
  background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${image}')`
}">...</div>

.hero-image {
    background-size: cover;
}
howtopythonpls
  • 770
  • 1
  • 6
  • 18
  • 3
    in the second attempt replace `background` by `background-image` and you can use `background-size` – Temani Afif Jun 20 '19 at 13:33
  • Possible duplicate of [Why can't I use background image and color together?](https://stackoverflow.com/questions/903659/why-cant-i-use-background-image-and-color-together) – metaDesign Jun 20 '19 at 13:33
  • you can also try something like this: https://stackoverflow.com/a/54652984/8620333 (make the image a CSS variable) – Temani Afif Jun 20 '19 at 13:35
  • Wow thanks @TemaniAfif, your first answer did the trick! Didn't know it was that easy.. – howtopythonpls Jun 20 '19 at 13:36
  • instead of background in your inline style - use background-image otherwise the shorthand inline property will override the background size in your style sheet – Pete Jun 20 '19 at 13:45
  • I need to use inline to dynamically set the background image @Pete – howtopythonpls Jun 20 '19 at 13:47
  • That's what I'm saying - if you use background - it is shorthand for all background properties and therefore the inline style takes precedence over anything that is not marked !important in your stylesheet - that's why your background size is ignored in your second attempt. By only targeting the image (as that's the only dynamic thing) your stylesheet will not be overridden – Pete Jun 20 '19 at 13:49
  • Oh, you're right! I read that incorrectly, but that was exactly what had already been mentioned. – howtopythonpls Jun 20 '19 at 16:49

1 Answers1

2

As suggested by Temani, the second attempt should use background-image in the html instead of just background. Solution:

<div class="hero-image" :style="{ 
  backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${image}')`
}">...</div>

.hero-image {
    background-size: cover;
}
howtopythonpls
  • 770
  • 1
  • 6
  • 18