I recently downloaded a Background Image to add to the Home Page of my VueJS application. Unfortunately, when the page loads, only a portion of the page is covered by the image. My goal is to have the entire page filled with the image, except for the Navbar section.
Below is the code snippet from my HomeView.vue:
<template>
<div id="Home">
<h1 class="header"> Welcome {{name}} </h1>
<h2>A very warm welcome to v2 of QuantifiedSelf</h2>
</div>
</template>
<script>
import axios from 'axios';
export default {
Name: 'HomeView',
mounted() {
axios.get('http://localhost:5000/')
.then((resp ) => console.log(resp.data))
.catch((err) => console.log(err.response))
},
data() {
return {
name: localStorage.name,
}
},
};
</script>
<style>
.header{
margin-top: 80px;
}
#Home{
background-image: url("../Pics/pic1.jpeg");
margin-bottom: 250px;
}
</style>
View the current state of the Home page: https://i.sstatic.net/F65FZ.png
Any suggestions on how to cover the entire page with the background image?