即使图像尺寸小于页面，也要将背景图像拉伸到 window 的整个宽度？

Question

是否可以将背景图像的大小增加到超出其尺寸以填满页面。我知道会有一些模糊，但没关系。

例如，如果我的图片宽度为 1000 像素，我如何才能使其超出其宽度以填满屏幕。

Answer 1

将图像设置为背景，并使用 background-size、background-position 和 background-repeat 属性:

background-size: 100%;
background-position: center;
background-repeat: no-repeat;

Answer 2

尝试

background-size: 100%

或

background-size: cover

这是一个常见的实现。

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  background-image: url('http://placehold.it/150x150');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

Answer 3

background-size: 100%;
background-position: center;
background-repeat: no-repeat;

Answer 4

使用background-size: cover;

#content { 
  
  width: 600px;
  height: 300px;
  border: 2px solid #333;
  background: #ddd url(http://lorempixel.com/400/200/nightlife/) no-repeat center center; 

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
}

<div id="content">
</div>

即使图像尺寸小于页面，也要将背景图像拉伸到 window 的整个宽度？

Stretch background image to full width of the window even if the image dimensions are less than the page?

html

css

background-image