How to use Inline Style In Vue

In this approach, we directly bind the background image by specifying inline styles using the style attribute.

Syntax:

<div :style="{ backgroundImage: 'url(\'your-image-url.jpg\')' }"></div>

Example: The below code example will explain the use of the inline style binding to bind the background image

HTML

<!DOCTYPE html>
 
<html>
<head>
    <title>
        Background Image binding in VueJS
    </title>
    <style>
        #app{
            text-align: center;
        }
 
        #app div{
            height: 300px;
            width: 800px;
            background-size: cover;
            background-repeat: no-repeat;
            margin: auto
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <div id="app">
        <h1>
            w3wiki
        </h1>
        <div :style="{
            backgroundImage: 'url(' + img + ')'}">
            <h3>
              Background Image binding using
              the inline styles in VueJS.
            </h3>
            <h4>
              This Background image is bounded
              using the inline styles in VueJS.
            </h4>
 
        </div>
    </div>
 
    <!-- VueJS CDN Link -->
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2">
    </script>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                img: 
'https://media.w3wiki.org/wp-content/cdn-uploads/20220131222755/Vue.js-Tutorial.png',
            }
        })
    </script>
</body>
 
</html>

Output:

How to Bind the Background Image in VueJS ?

In VueJS, the background images can be set from different types of properties like data property, computed property, or directly from an image source. In this article, we will see the different approaches to bind the background image in VueJS as listed below:

Table of Content