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

我正在使用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>

来源

2012-02-02 Rob

，请告诉我们，页面或添加代码。 – Tim 2012-02-02 10:57:58

@Tim刚添加了代码。 – Rob 2012-02-02 11:19:44

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

.wrapper { 
    overflow: hidden; 
}

，并可能

#footer { 
    overflow: hidden; 
}

有东西（保证金/填充）页脚外溢出。

来源

2012-02-02 11:39:52 Supr

太好了，谢谢你解决了水平问题。我现在唯一的问题是页脚坐落在背景图片下面，而不是最上面。 – Rob 2012-02-02 12:02:02

尝试'#footer {position：relative;}'如果这与您使用页脚的方式不相冲突。 – Supr 2012-02-02 12:13:59

请参阅http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp – Supr 2012-02-02 12:16:58

没有看到你的代码，这是很难回答的，但在萤火/ WebKit的开发人员工具检查CSS溢出html和body元素上的其他显示属性以及包装内容的其他元素。它很可能有一个溢出：在那里需要设置溢出的自动：hidden;

来源

2012-02-02 10:59:46 wheresrhys

只需在我的问题中添加代码即可。 – Rob 2012-02-02 11:20:04

大多数元素都有溢出：自动作为默认设置，因此请尝试设置溢出：隐藏在正文和html上 – wheresrhys 2012-02-02 11:31:38

看看您的代码，它可能与#mainContent和#body以奇怪的方式碰撞的样式有关 – wheresrhys 2012-02-02 11:43:05

咦？你为什么要这么麻烦？您还没有给出任何分析代码，但我相信你以后是这样的：

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>

来源

2012-02-02 11:14:57 lpd

需要它在IE8中工作，这样就排除了答案的第一部分。此外，您的答案的第二部分只是将图像延伸至100％的宽度和高度。全屏幕背景脚本保持图像的高宽比，并使其充满屏幕，这是一种非常不同的结果。 – Rob 2012-02-02 11:17:08

我推测这是你想要的“全屏”背景图像。你想要图像溢出，即部分隐藏，或减小尺寸以适应容器？ – lpd 2012-02-02 11:21:00

我发现这是创建额外滚动的粘性页脚。如果可能，我想溢出：隐藏;因为这只会填充浏览器窗口。我已经添加了我的代码。 – Rob 2012-02-02 11:23:32

试试这个伙伴为主体元素，

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

来源

2012-02-02 12:16:34 Guru

干杯，但我不认为这将工作，因为没有什么可以调整背景图像的大小并保持高宽比。 – Rob 2012-02-02 13:54:03

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

回答

相关问题