无论背景和图像的大小如何，如何用图像覆盖背景？

Question

我正在尝试使用背景图像来覆盖整个窗口，但却无法让它按照我想要的方式运行。

我目前有

'background-size': 'cover'

但是，我发现当缩小宽度时，图像拼贴。

所以我把它改成了：

'background-size': 'cover',
'background-repeat': 'no-repeat'

但现在，只有空白区域出现在图像下方。

然后我尝试了

'background-size': 'fill',
'background-repeat': 'no-repeat'

但是，现在当图像小于窗口时，它不会扩展以填充窗口。

什么是最佳解决方案，以便图像覆盖整个屏幕，不平铺，并且没有图像大小的空白区域？

Answer 1

您可以通过将高度设置为100vh（即可用视口高度的100％）来明确设置背景的大小以覆盖整个视口。这与background-size: cover结合应该可以处理您的场景：

body {
    background: url('{background-url}');
    background-size: cover;
    height: 100vh;
}

示例

你可以see an example of this in action here并在下面演示：

Answer 2

你必须给他

public function index()
{
    $this->view('contact/index', ['name'=>'David']);
}

height: 100vh

body{margin: 0px;}
div{
  background-image: url(https://placekitten.com/400/600);
  background-size: cover;
  background-position: center;
  height: 100vh;
  width:100%;
}

Answer 3

试试这个：

html {
  background: url(...) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

适用于Safari 3 +，Chrome无论是+，IE 9 +，Opera 10 +，Firefox 3.6 +

来源：https://github.com/adesigns/calendar-bundle/blob/master/README.md