[Vuejs]-Vue.js – issues with the background image covering on viewport size on Desktop

by

0👍

According to W3C documentation cover in the compact background attributes mode should be used with / before it, like so: 'url('+ step.img +')' + 'no-repeat center / cover', check my working snippet answer below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="el">
  <div rel="preload" :style="{ 'background': 'url('+ step.img +')' + 'no-repeat center / cover' }">
  <section>
       <h1>{{ step.title }}</h1>
    </section>
   
    <ul>
      <li @click="doActions(action)" 
        v-for="action in step.actions" 
        :key="action.step"
        v-show="canDoAction(action)"
      >

      </li>

    </ul>
  </div>
</div>

<script>
  new Vue({
    el: '#el',
    data: {
      step: {
        title: 'This is title',
        img: 'https://via.placeholder.com/1000'
      }
    }
  })
</script>

Leave a comment