Strange body padding (VueJS Nuxt, CSS)-CodePudding

I have little VueJS NuxtJS and it has background gif. For now it looks like this:

body {
  margin: 0 auto;
  background: url("assets/video/background-darked.gif") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  @media only screen and (max-width: 860px) {
    overflow-y: scroll;
  }
}

As you can I have it on the whole body, but I don't really need it, this background gif should be only on a few pages, so, if change body to classname (let's say main) and use this class like that:

<template>
  <div class='main'>
    <Header />
  </div>
</template>

I will have that strange paddings:

How may I fix this?

CodePudding user response：

Assuming the template shown is the root component rendered...

Moving those styles from body to a classname would then default <body>'s styles to use default margins based on the user agent, which likely is the cause of the "strange padding" you mentioned.

If you want to keep the original margins from before you made the change, keep only the margin style:

// MyPage.vue
<style>
body {
  margin: 0 auto;
}

.main {
  background: url("assets/video/background-darked.gif") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  @media only screen and (max-width: 860px) {
    overflow-y: scroll;
  }
}
</style>