CODEWITHSUNDEEP
javascripthtmlcssvue.js
Amissi
Amissi

Reputation: 217

How to fill background image in Vue JS + Bootstrap app with dynamic content?

So I've been trying to set my apps background but when I render dynamic content using v-for, this white block appears to above my app background. Has anyone run into this, I've been trying to solve it for hours. Seems like my background is fully stretching. Thanks

eu

<template>
  <div id="app">
    <div class="container">
      <div class="row my-row mt-5">
        <div v-for="n in 20" :key="n" class="col-10 col-lg-3 col-md-5 my-col mt-5 mt-lg-0">
          <img class="img" src="../assets/vinyl.png" alt="Store Images" />
        </div>
    </div>
    </div>
  </div>
</template>


#app{
  background: url("./assets/background.svg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.container{
  height: 100vh;
}

Upvotes: 0

Views: 1226

Answers (2)

Amissi
Amissi

Reputation: 217

body {   
  background: url("./assets/background.svg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   }

Looks like changing the body did the trick

Upvotes: 0

hurricane
hurricane

Reputation: 6734

Instead of giving height, you can use min-height: 100vh;

.container {
  min-height: 100vh;
}

#app {
  background: blue;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 100px;
}

.long{
  height: 1500px;
  width: 100%;
  background: red;
}
 <div id="app">
   <div class="container">
    <div class="long">
    </div>
   </div>
 </div>

https://jsfiddle.net/z01wbdmq/

Upvotes: 1

Related Questions