I have a page with a background image and some stuff above it. The stuff above fits exactly in the screen size and that doesn't need a scroll. But because of the background image being large scroll was appearing. How to fix it?

```css
#bg-img {
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-text {
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}
```

```html
<v-content>
  <!-- <v-container> -->
  <v-layout @click="closeform">
    <v-flex>
      <img id="bg-img" class="white--text" height="100%" src="https://image.shutterstock.com/image-photo/set-badminton-shuttlecock-feather-professional-450w-1030859371.jpg"/>
    </v-flex>
  </v-layout>
  <v-container grid-list-md text-xs-center class="bg-text" @click="closeform">
    <h2>Hey </h2>
  </v-container>
</v-content>
```