how to add backgroud image Pseudo-element 'after' content with Angular 2?

Question

I'm trying to pass an URL image to my CSS from my html in Angular but I can't do that:

My CSS is :

card-profile_visual {
      height: $visual-height;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%), saturate(darken(#3A4A7B, 15%), 20%));
      &:before,
      &:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;       
        background: url(myUrl) no-repeat center center/cover;
        opacity: 0.5;
        mix-blend-mode: lighten;
      }

    }

And my html is :

<div class="card-profile_visual" [style.background-image]="'url('+offer.photo_url+')'"></div>

How can I achieve this to pass offer.photo_url to CSS in :

background: url(myUrl) no-repeat center center/cover;

Thank you soo much

I don't think there is a pure CSS way to do this. See here: https://stackoverflow.com/questions/26967890/css-set-background-image-by-data-image-attr — `background: url(attr(style));` is only in your dreams! — Rick Davies, Jul 24 '18 at 08:47

Vikasdeep Singh · Answer 1 · 2018-07-24T09:02:50.743

Use ngStyle and with CSS Variables for this like below:

Instead of:

CSS:

card-profile_visual {
      height: $visual-height;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%), saturate(darken(#3A4A7B, 15%), 20%));
      &:before,
      &:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;       
        background: url(myUrl) no-repeat center center/cover;
        opacity: 0.5;
        mix-blend-mode: lighten;
      }

    }

HTML:

<div class="card-profile_visual" [style.background-image]="'url('+offer.photo_url+')'"></div>

Use this:

CSS:

card-profile_visual {
      height: $visual-height;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%), saturate(darken(#3A4A7B, 15%), 20%));
      &:before,
      &:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;       
        background: var(--my-image) no-repeat center center/cover;
        opacity: 0.5;
        mix-blend-mode: lighten;
      }
    }

HTML:

<div class="card-profile_visual" [ngStyle]="{'--my-image': ' + offer.photo_url + '}"></div>

I hope it will help you.

Hi,VicJordan ... i've did that and when I inspect the code, my html is :
and my css : background: var(--my-image) no-repeat center center/cover; — Josseph, Jul 24 '18 at 09:46

score 1 · Answer 2 · answered Jul 24 '18 at 11:14

1

You can use url in content property

content: url(imageUrl);

answered Jul 24 '18 at 11:14

mustafa bagwala

261
2
12

jack · Answer 3 · 2018-07-24T08:34:40.257

0

Try this

<div class="card-profile_visual" [style.backgroundImage]="'url('+offer.photo_url+')'"></div>

To add background image in pseudo element in css you can do this way

.card-profile_visual:after{
  background: url(myUrl) no-repeat center center/cover;
}

edited Jul 24 '18 at 08:34

answered Jul 24 '18 at 07:51

jack

479
5
17

Check how i wrote background image – jack Jul 24 '18 at 07:57
I want to pass url in :after background: url(myUrl) no-repeat center center/cover; – Josseph Jul 24 '18 at 08:06
We can't use ngStyle or style.backgroundImage to set after or before – jack Jul 24 '18 at 08:13
You need to use css for that. i also found that in above css you didn't use dot before class name – jack Jul 24 '18 at 08:14

how to add backgroud image Pseudo-element 'after' content with Angular 2?

3 Answers3