当前位置：文江博客话题详情

全屏背景与粘性页脚一起使用？

发布于 2025-01-01 22:25:59 字数 1753 浏览 0 评论 0原文

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

我还尝试合并粘性页脚使用本教程。

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

我的图像为 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>

原文

I'm using this tutorial to create a full screen background. (UPDATE: Using height and width at 100% for the image is not what I want as that just stretches an image, this script keeps the aspect ratio.)

I'm also trying to incorporate a sticky footer using this tutorial.

Adding the sticky footer part is creating some extra horizontal scrolling on the background image.

My image is 700px x 466px and my browser window is 1240 x 1414. My website sits in the middle of the browser window horizontally but there's an extra bit of scrolling that can be done to the right.

How can I get the full screen background image working with the sticky footer so that it removes the extra horizontal scrolling? The sticky footer needs to sit on top of the background image not below it.

UPDATE: Using Supr's answer to solve the horizontal problem, the only thing left to solve is that the footer sits below the background image rather than on top of it.

This is my 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;
}

Here's my 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦年海沫深 2025-01-08 22:25:59

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

.wrapper {
    overflow: hidden;
}

，

#footer {
    overflow: hidden;
}

以防万一有东西（边距/填充）溢出到页脚之外。

Adding the footer is causing horizontal scrolling? Just an untested idea, but try adding

.wrapper {
    overflow: hidden;
}

and possibly

#footer {
    overflow: hidden;
}

in case there is something (margin/padding) overflowing outside the footer.

回复收藏 0 原文

吲‖鸣 2025-01-08 22:25:59

如果没有看到您的代码，就很难回答，但在 firebug/webkit 开发人员工具中，请检查 html 和 body 元素以及包装内容的任何其他元素上的 css 溢出和其他显示属性。那里可能有一个溢出：自动，需要设置为溢出：隐藏；

回复收藏 0 原文

汹涌人海 2025-01-08 22:25:59

啊？你为什么要这么麻烦？您没有提供任何分析代码，但我想您正在寻找类似的东西：

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>

Huh? Why are you going to that much trouble? You haven't given any code for analysis, but I presume you're after something like:

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

Or an alternative that doesn't use CSS3, for IE8 compatibility:

#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%;
}

Plus html:

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

回复收藏 0 原文

无畏 2025-01-08 22:25:59

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

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

Try this mate for body element,

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

回复收藏 0 原文

~没有更多了~