Add Background Image in Vue.js with Examples
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>
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.