背景大小CSS3工作时非常怪异的行为

Question

我最近了解了background-size财产感谢这个话题

Set size on background image with CSS?

正如您可以猜到，我试图做一个背景图片占满整个屏幕并不多/不少。这里是我的小提琴

https://jsfiddle.net/1x7ytdaa/

document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')"; 
document.body.style.backgroundSize = "contain"; 

这里是什么contain财产确实

缩放图像的最大尺寸是这样的，它的宽度和高度都能够适合内容区域内

它不应该的问题的图像是什么规模。如果它更小，它应该缩放到屏幕的全尺寸。如果它更大，则应该缩小比例。

在小提琴中，您可以看到图像水平重复5次，垂直重复5次。

我试过100% 100%和而宽度拉伸全屏，它仍然显示同一图像5 1/2倍垂直

我无法解释这种现象。有没有人有任何想法？

Answer 1

两件事情：

• 背景重复
• 宽度和身体

的高度，你可以在an edited fiddle，问题是background-repeat的默认值是repeat。因此，图像将被重复而不是被拉伸。但是，这并不能解决所有问题，因为body和HTML元素的宽度应该定义为100％。

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

document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')"; 
document.body.style.backgroundSize = "contain"; 
document.body.style.backgroundRepeat = "no-repeat"; 

如果要覆盖整个屏幕，请使用cover而不是包含。封面确保元素被完全覆盖，而包含只是确保背景图像被最大限度地包含（这可能会导致空白）。

Answer 2

这可能帮助：

position: fixed; 
background-position: center; 
overflow-x: hidden; 
width: 100%; 
height: 100%; 
background: url(img/xxx.jpg); 
background-size: 100%; 
background-attachment: fixed; 
overflow-y: scroll;