全屏背景使用粘性页脚

我使用本教程创建全屏背景（更新：对图像使用100%的高度和宽度不是我想要的，因为这只是拉伸图像，这个脚本保持了纵横比。）

我也尝试使用本教程加入一个粘性页脚。

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

我的图片是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>

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

.wrapper {
    overflow: hidden;
}

可能还有

#footer {
    overflow: hidden;
}

以防页脚外溢出某些内容（边距/填充）。

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

嗯？你为什么要惹那么多麻烦？你还没有给出任何分析代码，但我想你想要的是：

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>

尝试这个身体元素的伴侣，

* {
    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;
}

相关内容

最新更新

热门标签：