Vue.jsでページの背景色を設定したい。

Vue.jsを勉強しているものです。

index.htmlのページ全体の背景にグラデーションをかけたいのですが、ブラウザを読み込むと以下のように画面が分割されるように表示されてしまいます。

やりたいことは以下の例のようにページ全体にグラデーションをかけたいです。

実装したソースコードは以下です。

index.html

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1.0">
6    <title>my-project</title>
7  </head>
8  <body>
9    <div id="app"></div>
10    <!-- built files will be auto injected -->
11  </body>
12</html>
13

App.vue

Vue.js
1<template>
2  <div id="app">
3    <img src="./assets/logo.png">
4    <HelloWorld/>
5  </div>
6</template>
7
8<script>
9import HelloWorld from './components/HelloWorld'
10
11export default {
12  name: 'App',
13  components: {
14    HelloWorld
15  }
16}
17</script>
18
19<style>
20#app {
21  font-family: 'Avenir', Helvetica, Arial, sans-serif;
22  -webkit-font-smoothing: antialiased;
23  -moz-osx-font-smoothing: grayscale;
24  text-align: center;
25  color: #2c3e50;
26  margin-top: 60px;
27}
28
29html {
30  background: linear-gradient(#05FBFF, #1E00FF);
31}
32
33</style>

参考にしているサイト：
https://qiita.com/567000/items/dde495d6a8ad1c25fa43

Vue.jsに詳しい方、ご回答よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

高さがないために、グラデーションがリピートされているようですので、
style部分の記述を下記のようにしてみてくださいー

css
1html {
2  background: linear-gradient(#05FBFF, #1E00FF);
3}
4
5↓
6
7html {
8  height:100%;
9  background: linear-gradient(#05FBFF, #1E00FF);
10}
11