Background image cover whole screen

问题

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?

回答1:

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.

回答2:

Here you go, just set the background in a html tag

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

回答3:

Method 1

    html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

Method 2(Using CSS)

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Method 3(Also CSS)

<div id="bg">
   <img src="images/bg.jpg" alt="">
</div>

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Method 4(JQuery)

<img src="images/bg.jpg" id="bg" alt="">

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

Refer https://css-tricks.com/perfect-full-page-background-image/

It has loads of tricks for fullscreen background.

来源：https://stackoverflow.com/questions/29050633/background-image-cover-whole-screen

标签

css

background

screen

cover