Add Background Image in Vue.js with Examples

Published: Dec 24, 2019 - Updated: Mar 16, 2022

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;


No comments yet…