Add Background Image in Vue.js with Examples

Published on December 24, 2019 34 sec read

We're available to do freelance project. Take a look at our services!

In this guide, I’ll show some ways to set background image in Vue.js. Let’s see the ways with examples:

Example 1

We are able to set inline background image in kebab-case and camelCase properties.


<div :style="{'background-image':'url('}"></div>


<div :style="{backgroundImage:'url('}"></div>

Example 2

If we need to display background image from server-side, we can show like this way:

<div :style="{backgroundImage:`url(${article.image})`}"></div>

Example 3

We can set background image using vue data property. Let’s see the example:

        <div :style="image" class="image"></div>

    export default {
        data() {
            return {
                image: {backgroundImage: "url("}

    .image {
        height: 150px;
        background-repeat: no-repeat;


Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.


Leave a Reply

Your email address will not be published. Required fields are marked *