Question

我正在CSS和HTML建立一个网站。我正在向我的网站添加背景图片。麻烦的是，图像并没有显示为网站的背景。

我的CSS代码：

＆＃13;

.bg {
  background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
  height: 50%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: repeat-x;
  background-size: cover;
}

＆＃13;

<div class="bg"></div>

＆＃13;

请问我是否需要从我的网站获取更多代码。

编辑：这不是克隆，我已尝试过我在这里遇到的所有其他解决方案，但没有任何作用。

Answer 1

如果您使用fixed height:

，这样可以正常使用

在下面的例子中，我使用了100px;

  .bg {
    background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
    height: 100px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
  }

<div class="bg">

</div>

但如果您希望它是100％的屏幕，您可以随时使用100vh

.bg {
  background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
  height: 100vh;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: repeat-x;
  background-size: cover;
}

<div class="bg">

</div>

如果您想了解有关vh的更多信息，请访问 link

希望这对你有所帮助。

Answer 2

页面的背景图片可以这样设置：

＆＃13;

body {
    background-image: url("paper.gif");
}

＆＃13;

所以也许你可以改变你的代码：

＆＃13;

  .bg {
    background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
    height: 100px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
  }

＆＃13;

Answer 3

如果要将背景图像添加到整个HTML页面，请使用正文标记。

body {
    background-image: url("https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg");
}

如果您想为特定类添加背景，请使用此

.bg {
    background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg');
}

相应地调整你的身高。如果你想添加到完整的类然后使用身高：100％，否则根据自己的情况调整。

Answer 4

OP引用的图像是原件的调整大小版本。此解决方案使用原始图像以及使用高度100vh（由@weBBer推荐）和自动宽度的CSS。背景位置保持中心值。似乎不用重复图像所以CSS使用不重复。这适用于Google Chrome（第49版）。

.bg {
  background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
  width:auto;
  height:100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
}

<div class="bg"></div>

结果是由于background-size属性设置为cover以及设置为100vh的height属性（即视口高度的100％）而填充页面的居中图像;详细了解此测量和其他测量here。

如果你只想填充DIV尺寸范围内的部分，那么你可以改变CSS并用object-fit替换background-size属性，如下所示：

.bg {
  background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
  height:480px;
  margin-left:auto;width:100%;margin-right:auto;
  background-position: center;
  background-repeat: no-repeat;
  object-fit:cover;
  
}

<div class="bg"></div>

CSS背景图片未显示在网站

4 个答案: