Apr 5, 2022
1 min read
How to add a background image in Style Tag in Vuejs
After you have created your Vuejs project, you need to add a background image.
Let’s assume your HomePage.vue component has this content:
<template>
<body>
<main>
<h1>Logistics and maritime services</h1>
<h2>With more than 8 years of experience in the maritime sector and logistics transport, we will be able to meet your needs. </h2>
<button type="button" class="btn btn-info">Ask for a quote</button>
</main>
</body>
</template><style>/* main {
background-image: url('~@/assets/banner.jpg'); // or
background-image: url('./assets/banner.jpg');
} */</style>
Adding background images on the style tag in this component did not make the background display on the browser. More so, I got a 404 error (Not Found)
However, adding it in the App.vue file, below the template tag displayed the result on the browser.
<style>
main {
background-image: url('./assets/banner.jpg');
}
</style>
