如何使背景图片不再重复

问题描述

这是我的代码：

div#bg {
  background-size: contain;
  background-repeat: no-repeat;
 
  }

<div  id="bg" v-bind:style="{ background: 'url(' + require('../assets/kafa.jpg') + ')' }">

所以，我想要的只是一张覆盖整个页面的图像，但是无论我做什么，都只是div覆盖了整个页面，并重复了图像（可能是因为我只访问具有属性的div而不是图像本身）。我尝试使用不同的图像尺寸，但结果始终相同。

Here's how it looks like

谢谢。

编辑1：我也尝试过最小高度：100％和最小宽度：100％，但是它仍然无法正常工作。

解决方法

您可以执行以下操作：

在组件中（将background替换为background-image：

<div  id="bg" v-bind:style="{ 'background-image': 'url(' + require('./assets/2.jpg') + ')' }">

在CSS中：

div#bg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}