Add Background Image in Vue.js with Examples

Published on Dec 24, 2019

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.

Kebab-case:

<div :style="{'background-image':'url(https://example.com/bg.png)'}"></div>

camelCase:

<div :style="{backgroundImage:'url(https://example.com/bg.png)'}"></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:

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

<script>
    export default {
        data() {
            return {
                image: {backgroundImage: "url(https://via.placeholder.com/150)"}
            };
        }
    };
</script>

<style>
    .image {
        height: 150px;
        background-repeat: no-repeat;
    }
</style>

Comments (0)