CODEWITHSUNDEEP
javascripthtmlcssvue.js
howtopythonpls
howtopythonpls

Reputation: 790

Combine linear-gradient with dynamic background-image

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;
}

Upvotes: 2

Views: 2870

Answers (1)

howtopythonpls
howtopythonpls

Reputation: 790

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;
}

Upvotes: 2

Related Questions