Horje
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

Using Inline Style

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>
            GeeksforGeeks
        </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.geeksforgeeks.org/wp-content/cdn-uploads/20220131222755/Vue.js-Tutorial.png',
            }
        })
    </script>
</body>
 
</html>

Output:

ImgBind

Using CSS Classes

In this approach we use CSS clases to bind background image, if you have styles for different background images then this approach helps in bind them dynamically.

Syntax:

<div :class="{ 'background-class-1': condition, 'background-class-2': !condition }"></div>

Example: The below example explains the use of the classes to bind the styles using VueJS.

HTML

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

Output:

ImgBind


 


Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
Break a number into 3 positive integers (p1, p2, p3) such that p2 &gt; p1 &gt; p3 Break a number into 3 positive integers (p1, p2, p3) such that p2 &gt; p1 &gt; p3
Charts.js Introduction Charts.js Introduction
Best Software development Courses [2023] Best Software development Courses [2023]
Mongoose Documents vs Models Mongoose Documents vs Models
Create a Cryptocurrency wallet using React-Native Create a Cryptocurrency wallet using React-Native

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje