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