I am currently facing a dilemma in my application where I need to add a background image to certain routes while leaving others blank. Here is a snippet of my app.vue file:
<template>
<div id="app">
<div class="h-100">
<div class="bg" >
<NavBar/>
<router-view></router-view>
</div>
</div>
<Footer/>
</div>
</template>
To add the background image on the '/' route, I utilized the following code within my Home.vue component:
<style >
.bg {
height: 100%;
background-image: url('../assets/equipo.jpg') !important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
However, this applied the background image throughout the entire application. To remove the image from specific routes, I attempted to target the parent element like so:
<style >
.bg {
background-image: none;
}
</style>
Unfortunately, this removed the background image from all routes instead of just the intended ones. I also experimented with scoped styles for the second component, but that did not yield the desired result either.
It seems like the main question here is: How can I modify a parent element's style from within a child component's scoped style?