页面背景不显示整个图像

I have a website with a background image, choosen by random with javascript:

我有一个带有背景图片的网站,随机选择javascript:

document.body.style.background= 'url('+randombgs[num]+')';

I have set the background to an imagefrom the randombgs[] array which contains 15 backgrounds. But the background gets cut off, and the whole image isn't displayed (see picture below)

我已经将背景设置为包含15个背景的randombgs []数组的图像。但背景被切断,整个图像不显示(见下图)

This is what I see:

这就是我所看到的:

This is what I should see

这是我应该看到的

How can I fix this, so my browser shows the whole image and not 95% of it?

我该如何解决这个问题,所以我的浏览器显示整个图像而不是95%?

2 个解决方案

#1

Use CSS background-size property:

使用CSS background-size属性:

body {
  background-size: contain;
}

The image will fit your container.

图像将适合您的容器。

#2

You can use the background-size property in CSS (with value contain).

您可以在CSS中使用background-size属性(包含值)。

See http://www.w3schools.com/cssref/css3_pr_background-size.asp for more details.

有关详细信息,请参阅http://www.w3schools.com/cssref/css3_pr_background-size.asp。

Not supported on IE8 and less: http://caniuse.com/#feat=background-img-opts only.

IE8及更低版本不支持:http://caniuse.com/#feat=background-img-opts only。

#1