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

0

296
Views
Vuejs cómo agregar una imagen de fondo dinámica como pseudo-clase

En mi aplicación vue , quiero agregar una imagen de fondo dinámica como una pseudoclase, así que traté de hacer esto:

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

luego en la sección de estilo del componente:

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

Pero esto no funciona. ¿Como puedo resolver esto?

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

0

Tienes que mover la parte url() a css var, entonces debería funcionar:

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