How to add a background image in Style Tag in Vuejs

Anna Ikoki
Apr 5, 2022

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>

--

--