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;
}
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.