CODEWITHSUNDEEP
cssvue.js
newpost
newpost

Reputation: 83

css style missed

css style "background-position: center; " missed, why?because background will override background-position

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
  <div id="div1" :style="'background-position: center; height:200px;width:300px;background: url('+imgURL +')'"></div>
</body>
<script>
  var vm = new Vue({
    el: "#div1",
    data: {
      imgURL: 'https://www.baidu.com/img/bd_logo1.png'
    }
  });
</script>

</html>

Upvotes: 0

Views: 85

Answers (1)

Jason Aller
Jason Aller

Reputation: 3654

In your CSS you are replacing the background-position with background later on in the rules. If you change background to background-image it will work.

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
  <div id="div1" :style="'background-position: center; height:200px;width:300px;background-image: url('+imgURL +')'"></div>
</body>
<script>
  var vm = new Vue({
    el: "#div1",
    data: {
      imgURL: 'https://www.baidu.com/img/bd_logo1.png'
    }
  });
</script>

</html>

Upvotes: 1

Related Questions