1

I am new to Nuxt Js and having trouble putting the background behind the navbar.

Nav.vue

<style scoped>
.padding {
    padding: 5px;
    background-color: #082F4D
}
.navbar {
    position: absolute;
    overflow: hidden;
}
.navbar a {
    float: left;
}
</style>

index.vue

<div class="container">
  <FirstPageFirstSection />
</div>

...
<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

FirstPageFirstSection.vue

<style scoped>
.Hero {
  background-image: url("~/assets/logo/xx.jpeg");
  min-height:300px;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: flex-start;
}
</style>
kissu
  • 40,416
  • 14
  • 65
  • 133
user16295310
  • 39
  • 1
  • 4

1 Answers1

1

If you want to have a dynamic background image, you need to do this in the template (probably doable in the style section in Vue3 but not in Vue2 to my knowledge).

This answer could help: https://stackoverflow.com/a/66365980/8816585

This is pretty much this

<div :style="{ backgroundImage: `url(${require('~/assets/logo/xx.jpeg')})`}"></div>
kissu
  • 40,416
  • 14
  • 65
  • 133
  • I am not sure if this is required. But what I had added the background successfully by placing the background container first before adding the navbar container. – user16295310 Jun 23 '21 at 13:01
  • I don't know what your view looks like so I cannot say. I was referring to a Vue issue here, rather than a CSS one. But yeah, you of course need to not hide it below something. Hope my answer helped @user16295310 – kissu Jun 23 '21 at 13:34