如何让背景图片不重复

Question

这是我的代码：

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

谢谢。

EDIT1：我也尝试过最小高度：100% 和最小宽度：100%，但它仍然无法正常工作。

Answer 1

你可以这样做：

在组件中（将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;
}

如何让背景图片不重复

How to make background image not repeat itself

html

css

background

background-image

vue.js