• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

293
Views
Vuejs how to add dynamic background image as pseudo-class

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?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

  }

}
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error