Vuejs how to add dynamic background image as pseudo-class

Question

In my vue-app, I want to add a dynamic background-image as a pseudoclass, so I tried to do this:

<div id="myContent" :style="{ '--bgImage': content.icon.url }">
  ...some content here
</div>

then in the style section of the component:

#myContent {

  &:after {
    content: '';
    background: url(var(--bgImage));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;

    width: 40vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    transform: translateY(-0vh);

  }

}

but this does not work. How can I solve this?

I think you should interpolate the entire value of the property, because `url(var())` doesn't work. Look at this answer to learn more. https://stackoverflow.com/a/42331003/6920871 — christo, Sep 10 '21 at 08:47

score 3 · Accepted Answer · answered Sep 10 '21 at 08:39

You have to move the url() part into the css var, then it should work:

https://jsfiddle.net/wubqt7xe/

<div id="app">
  <div id="myContent" :style="{ '--bgImage': `url('${content.icon.url}')` }">
    ...some content here
  </div>
</div>

#myContent {

  &:after {
    content: '';
    background: var(--bgImage);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;

    width: 40vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    transform: translateY(-0vh);

  }

}

Vuejs how to add dynamic background image as pseudo-class

1 Answers1