``Unusual padding for the body in VueJS and Nuxt, with a touch of CSS

I am currently working with VueJS + NuxtJS and have implemented a background gif. Right now, the code 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;
  }
}

However, I only want the background gif to appear on certain pages, not throughout the entire body. If I change body to a class name (let's say main) and use it like this:

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

I encounter strange padding issues:

https://i.sstatic.net/ue2zV.png

Any suggestions on how to fix this?

javascripthtmlcssvue.jsnuxt.js

Answer №1

if we assume that the template displayed is the root component being rendered...

By transferring those styles from the body to a class name, it would reset the styles of <body> to default margins determined by the user agent, which is likely the reason behind the "strange padding" you observed.

If you wish to retain the original margins from before the modification, only include 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Enhancing the spacing between background images through CSS: A guide to using the repeat property

Looking to design a background with a repeating image using CSS. background: url(../images/bg.PNG) repeat; However, facing an issue where the images are too close together. Any suggestions on how to add padding around each image? ...

css

The text area appears to be malfunctioning and is not allowing the

<textarea rows="18" cols="80" style="resize:none;"> <?php $str = str_replace('<br>', '\n', 'some text<br><br>another line of text'); echo($str); ?> </textarea> Below is the des ...

phphtmltextarea

The charts created using chartjs-vue display no data

After following some examples to create a test chart, I am facing an issue where the chart renders blank with dummy data. https://i.sstatic.net/RD77S.png My initial suspicion is that maybe the options are not being passed for the lines, but it seems like ...

javascriptvue.jschart.jsvue-chartjs

Oops! Looks like there was an error: $http is not defined

I'm facing a challenge with implementing $http in the AngularJS framework. I've gone through various other resources on this issue, but I can't seem to figure out what I'm doing incorrectly. Any assistance would be highly appreciated. T ...

javascriptjqueryangularjs

Can the text within the <h3> element be displayed on top of the inline image without the use of <span> tags or background images?

Can the text inside an <h3> tag be displayed over an image without using <span> and images in the background? HTML <h3>sample caption 1<img alt="" src="banner4.jpg" /></h3> CSS h3{ } h3 img { } ...

cssxhtml

Deep-diff JavaScript functions are not permissible for use

In my AngularJS application, I am currently attempting to utilize a JavaScript package. To reference it in my index.html file, I added the following code: <script src="deep-diff-0.3.1.min.js"></script> Furthermore, in my controller, I am usin ...

javascriptangularjsnode.js

how to uncheck a checkbox using Vue.js

When the next button is clicked, I want to remove the checked status of the checkbox without using Vue. Here is a demo code snippet: new Vue({ el: "#app", data: { id:0, items: [ {'id':1,'name':'chk-a',&apos ...

checkboxvue.jschecked

List-style-type outside of a table's boundaries

I recently experimented with using <ol> as list elements within a table in order to dynamically insert new table rows. <table> <thead> <tr> <th>head</th> <th>head</th> <th>h ...

javascriptjqueryhtml

CSS Animation Effect on Transparent PNG Image

Today, while working on my website, an interesting CSS effect came to mind. I vividly remember seeing it a few months ago, but unfortunately, I couldn't find it among my bookmarks. The website featured a captivating design with a prominent logo that ...

cssanimationcolorsspinning

The controller in AngularJS fails to function properly after the initial page refresh

I am currently utilizing AngularJS in my hybrid Ionic application. Here is my controller: .controller('SubmitCtrl', function($scope) { console.log("It only works when the page is refreshed!"); }); The console.log function runs perfectly fine ...

javascriptangularjsionic-frameworkangularjs-controller

The comparison between exposing and creating objects in a Nodejs router file

Recently, I began using expressjs 4.0.0 and was impressed by the express.Router() object. However, a dilemma arose when I moved all my routes to another file - how do I expose an object to the routes file? In my server.js file: ... var passport = ...

javascriptnode.jsexpressmean-stack

"Enhance your website's loading speed with the Google Page Speed Up

Hi, I've been using the Google PageSpeed Module and have created a .htaccess file to optimize my website (www.anetoi.com). I tried using combine_css to merge my CSS files but it didn't work as expected. I followed Google's instructions but s ...

cssperformance.htaccessweb

Encountered an error with Winston and Elasticsearch integration: "TypeError: Elasticsearch is not a constructor

I recently implemented winston-elasticsearch on my express server by following the code provided in the documentation var winston = require('winston'); var Elasticsearch = require('winston-elasticsearch'); var esTransportOpts = { le ...

javascriptexpresselasticsearchloggingwinston

How to hide offcanvas navigation bar with one click in Bootstrap 5

There was an issue with a Bootstrap 5 project where the offcanvas menu would remain open after clicking on an anchor link. Is there a way to automatically close the offcanvas menu after clicking on an anchor link? <nav class="navbar fixed-top py ...

javascriptjquerycssbootstrap-5

Dynamic item addition feature activated by button on contact form

I am looking to create a form that includes the standard name, phone, email fields as well as a dropdown for selecting products and a text box for inputting quantity. The unique aspect is allowing users to add multiple products (dropdown and quantity textb ...

javascriptphpjqueryhtmlforms

JavaScript button not responding to click event

Here is the initial structure that I have: <section id="content"> <div class="container participant"> <div class="row"> <div class="input-group"> <div class="input-group-prepend"> ...

javascripthtml

Struggling with an issue in React and Bootstrap4 while developing an application with create-react-app

In my experience with Windows 10, I encountered two scenarios where I faced problems. The first scenario involved creating applications using the create-react-app command and installing it with npm i -g [email protected]. Scenario 1 I stopped the React s ...

javascriptreactjstypescript

Using JQuery, eliminate the transition effect from a child CSS class

I am facing an issue with transitioning an ID that has a child class. My goal is to transition the ID only, without affecting the class within it. Despite going through CSS and jQuery documentation, I have been unable to achieve this. The transitions are c ...

javascriptjquerycss

Spacing in CSS between the menu and its submenu elements

My current challenge involves creating space between the menu and the submenu. However, I've noticed that when there is this space, the submenu doesn't function correctly. It only works when the design has no gap between the menu and the submenu. ...

htmlcss

Positioning a div above a Bootstrap navbar that disappears when scrolling

I am currently using bootstrap to design a website, and I am attempting to create a div that would initially appear above the navbar on an unscrolled webpage. However, once the user starts scrolling, I want this div to disappear and have the navbar fill it ...

javascriptjqueryhtmlcsstwitter-bootstrap