[Vuejs]-How to stop scrolling effect for background image

by

0👍

you can use background-position property,

background-attachment: fixed;
👤StackUser

0👍

none of the background properties will work it is an <img/> tag. You need to use background-image for that.

👤Hamza Arab

0👍

body {
  background-image: url(https://image.shutterstock.com/image-photo/set-badminton-shuttlec**k-feather-professional-450w-1030859371.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100%;
}

.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;
}
<v-content>
  <!-- <v-container> -->
  <v-container grid-list-md text-xs-center class="bg-text" @click="closeform">
    <h2>Hey </h2>
  </v-container>
</v-content>
👤user2226755

0👍

div {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    height: 90vh;
}

<div style="background-image: url('https://images.unsplash.com/photo-1548707519-f5221b5a5fd8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1265&q=80');"></div>
👤Xerjoff

Leave a comment