How to set a background image in Nuxt
In this post we will give you information about How to set a background image in Nuxt. Hear we will give you detail about How to set a background image in NuxtAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to set a background-image in the nuxt app using inline styles and external css.
Setting the image using inline styles
<template> <div :style="{ backgroundImage: 'url(${image})'}"> <h1>This is the About page</h1> </div></template><script>import bikeImg from "assets/bike.png";export default { data() { return { image: bikeImg, }; }};</script>In the above example, first we imported the bikeImg from the assets folder and assigned it to theimage data property.
Now inside the vue template, we added a background-image dynamically to the div element using : style directive object syntax.
Similarly, we can also store the entire object syntax inside the data property like this.
<template> <div :style="image"> <h1>This is the About page</h1> </div></template><script>import bikeImg from "assets/bike.png";export default { data() { return { image: { backgroundImage: 'url(${bikeImg})' }, }; }};</script>Setting image using external CSS
We can also add a background image to the elements using the external css instead of inline styles.
Example:
<template> <div > <h1>This is the About page</h1> </div></template><script>export default {};</script><style scoped>.container { background-image: url("~assets/bike.png");}</style>Note: The vue-loader automatically process your css styles using the css-loader, for example url(“~assets/bike.png”) translated into require(“~assests/bike.png”) .
Hope this code and post will helped you for implement How to set a background image in Nuxt. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs