Currently, I am utilizing Vue.js in a component where I need to set a background-image and wrap all content within it. My progress so far is outlined below:
<script>
export default {
name: "AppHero",
data(){
return{
image: { backgroundImage: "url(https://i.postimg.cc/0NbqSxfQ/banner-image.png)" }
};
},
props: {
titlehero: String,
subtitle: String,
}
}
</script>.home-hero{
// background: url("https://i.postimg.cc/0NbqSxfQ/banner-image.png");
background-size: cover;
width: 100%;
height: 100vh;
}<template>
<div :style="image" class="home-hero">
<div class="container" >
<div class="row">
<div class="col-lg-12">
<h3 class="fw-bold" >{{titlehero }}</h3>
</div>
</div>
</div>
</div>
</template>Here is the link to my codepen: enter link description here
The background-image I have currently achieved is shown in the screenshot below: however, the desired result should resemble the design on Figma: Any suggestions on how to fix this? Thanks in advance.
https://i.sstatic.net/el6hh.jpg https://i.sstatic.net/XBKXp.png