背景图片覆盖整个屏幕 [英] Background image cover whole screen

问题描述

在 http://www.jeroenvanderwaal.com 的主页上，我正在尝试获取背景图片覆盖整个屏幕.我不知道为什么它没有覆盖而是在底部留下一个空白空间.到目前为止的代码:

On the homepage of http://www.jeroenvanderwaal.com i'm trying to get the background image to cover the whole screen. I am unable to find out why it isn't covering but leaving an empty space at the bottom. The code so far:

.page-id-4 #main {
background-image: url(http://www.jeroenvanderwaal.com/wp-content/uploads/2015/03/achtergrond2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 60px;
padding-bottom: 0px;
}

我只想要这个页面的背景，因此是 .page-id-4 .有没有办法让它覆盖整个屏幕?

I only want the background on this page, hence the .page-id-4 . Is there any way to make it cover the whole screen?

推荐答案

如果您不想让所有子页面都显示主页背景，您可以这样做:

If you prefer not to have all your sub pages to show the homepage background, you can do this:

html {
    height: 100%;
}
body {
    min-height: 100%;
}

body.home {
    background: url(/wp-content/uploads/2015/03/achtergrond2.jpg) no-repeat center center fixed;
    background-size: cover;
}

您可以安全地删除所有前缀，对于任何现代浏览器都没有问题.

You can safely drop all the prefix, no problem for any modern browser.

这篇关于背景图片覆盖整个屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！