jquery - 全屏背景使用粘性页脚？

Question

我正在使用 this tutorial创建全屏背景。 (更新:为图像使用 100% 的高度和宽度不是我想要的，因为它只是拉伸(stretch)图像，此脚本保持纵横比。)

我还尝试使用 this tutorial 合并粘性页脚.

添加粘性页 footer 分是在背景图像上创建一些额外的水平滚动。

我的图像是 700 像素 x 466 像素，我的浏览器窗口是 1240 x 1414。我的网站位于浏览器窗口的水平中间，但可以向右滚动一点。

我怎样才能让全屏背景图像与粘性页脚一起使用，从而消除额外的水平滚动？粘性页脚需要位于背景图片上方，而不是下方。

更新:使用 Supr 的答案来解决水平问题，唯一需要解决的是页脚位于背景图像下方而不是背景图像上方。

这是我的CSS:

* {
    margin:0;
    }

html, body {
    height:100%;
    }

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }

.footer, .push {
    height: 4em;
    }   

.clear {
    clear:both;
    }

body {
    font-size: 62.5%; /* Resets 1em to 10px */
    background-repeat:repeat-x;
    background-image: url('images/background-repeat.jpg');
    margin:0px;
    }

#body {
    width:1000px;
    margin:0 auto 0 auto;
    }           

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

这是我的 html:

<div class="wrapper">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg" alt="" id="background">
    <div id="maincontent">
        <div id="body"></div>

        <div class="push"></div>
    </div>

    <div id="footer">
        <p><a href="/home" title="Home">Home</a> | <a href="/about" title="About">About</a></p>
    </div>
</div>

Answer 1

添加页脚导致水平滚动？只是一个未经测试的想法，但尝试添加

.wrapper {
    overflow: hidden;
}

可能

#footer {
    overflow: hidden;
}

以防有东西(边距/填充)溢出到页脚之外。