Question

我正在使用this tutorial创建全屏幕背景。 （更新：图像的高度和宽度均为100％不是我想要的，只是拉伸图像，此脚本保持纵横比。）

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

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

我的图片是700px x 466px，我的浏览器窗口是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;
}

如果页脚外部有某些内容（边距/填充）溢出。

Answer 2

在没有看到您的代码的情况下很难回答，但在firebug / webkit开发人员工具中，检查html和body元素上的css溢出和其他显示属性，以及包装内容的任何其他元素。很可能是溢出：auto需要设置为溢出：隐藏;

Answer 3

咦？你为什么要那么麻烦？你没有给出任何分析代码，但我认为你是在追求类似的东西：

body {
    margin: 0;
    background: url(folderInRootDirectory/myimage.jpg) no-repeat center center;
    background-size: cover;
}

或者不使用CSS3的替代方案，用于兼容IE8：

#bg_img {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    z-index: -99999999999999;
}
body {
    margin: 0;
    min-width: 100%;
    min-height: 100%;
}

加上html：

<body>
    <img id="bg_img" src="MYURL.JPG" />
    <!-- content -->
</body>

Answer 4

尝试使用body元素，

* {
    margin: 0;
    padding: 0;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    outline: 0 none;
    vertical-align: baseline;
}
body {
    color: #404040;
}

body {
    background: url("../design/bg.gif") repeat-x scroll 0 0 #FFFFFF;
    font: 0.8em/1.5 "arial",sans-serif;
}

全屏幕背景使用粘性页脚？

4 个答案: