How to add background image to view in Vue.js?

[mish]

Hey guys, I’m trying to make a restaurant website with Vue.js. I’m trying to add a background image to my home view but it’s not showing up. I’ve moved my images folder from assets to public, and tried others ways but it’s not working. When I remove scope it works but the image shows up in all of my views. How do I make the image show in only my Home.vue view?

pllealfunes/bites-restaurant

<template>
  <div id="wrapper">
    <h1>Bites</h1>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: "Home",
  components: {},
  data() {},
};
</script>
<style scoped lang="scss">
body {
  background: url("../../public/images/burger1.jpg") no-repeat center center
    fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
  font-size: 50px;
}
</style>

[dlaub3]

What happens if you apply the styles to #wrapper ? I’m wondering if the scoped CSS expects the HTML being targeted to be in the template, since body isn’t in your template there.

[mish]

Unfortunately nothing happens when I change it to #wrapper.

[dlaub3]

Do you have a demo that I could look at?

[mish]

Here’s the link to my repo: bites-restaurant/bites-restaurant at main · pllealfunes/bites-restaurant · GitHub

Right now I removed “scoped” from the styles tag which is why it now shows on the page. I did it just so I can continue working on the look of the page

[dlaub3]

I tested your code. I was able to have the background apply to #welcomeBox on your GH code using the scoped property. If you want to use scoped you’ll have to target an HTML element within the template like.

FWIW - I recommend joining the community of any technology you are using Join the Vue.js Community! — Vue.js. That’s usually the best place to get expert help.

[mish]

Thanks for the link. I’ll check it out to see if i can find a solution.