HTML标签上的背景位置不起作用答案

【问题标题】：Background-Position on HTML tag not workingHTML标签上的背景位置不起作用
【发布时间】：2012-11-29 10:38:14
【问题描述】：

我正在关注关于网页设计 tutsplus 的一个教程，最后一页： http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/demo_css_ribbon.html

我已经完成了所有事情，但是 html 样式出现了一个问题，你可以看到我已经包含了 height:100% ，但是在原始教程中没有那行，如果我删除它线那么它就崩溃了，但是在原始教程中它是完美的，为什么会这样？

而且现在我已经完成了 height:100% 然后你可以在底部滚动并且可以看到底部有一个边距，我希望该图像贴在页面的最底部。

请同时下载图片，以便您可以尝试此代码，这里是图片的链接：

http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/bottom_bg.jpg

http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/top_bg.png

CodePen = http://codepen.io/joe/full/xruKk

jsFiddle = http://jsfiddle.net/rssatnam/YekQe/embedded/result/

代码：

<html>
<head>
<style type="text/css">
html{
  background:#77d5fb url('bottom_bg.jpg') bottom center no-repeat;
  height:100%;
}
body{
  background:transparent url('top_bg.png') top center no-repeat;
  height:100%;
  width:100%;
  margin:0 0;
}
#container{
  width:900px;
  margin:0 auto;
}
#navBar{
  height:62px;
  background-color:#e5592e;
  margin:3em 0;
  position:relative;
  -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
  box-shadow:0px 0px 4px rgba(0,0,0,0.55);
  -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
  -o-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
  border-radius:3px;
  z-index:500;
}
#menu li{
  list-style-type:none;
  display:block;
  float:left;
  margin:1em 0.8em;
}
#menu li a{
  display:block;
  text-decoration:none;
  color:#F0F0F0;
  font-size:1.6em;
  margin:0;
  line-height:28px;
  text-shadow:0 2px 1px rgba(0, 0,0, 0.5);
}
#menu li a:hover{
  /*transition:margin-top 0.3s;
  -webkit-transition:margin-top 0.3s;*/
  margin-top:2px;
}
#lt-corner{
  width:0px;
  height:0px;
  border:50px solid;
  border-color:#d9542b transparent transparent;
  position:relative;
  float:left;
  top:1px;
  left:-50px;
}
#lb-corner{
  border:50px solid;
  border-color:transparent transparent #d9542b;
  width:0px;
  height:0px;
  position:relative;
  float:left;
  top:-40px;
  left:-150px;
}
#rt-corner{
  width:0px;
  height:0px;
  border:50px solid;
  border-color:#d9542b transparent transparent;
  position:relative;
  float:right;
  top:-107px;
  right:-45px;
}
#rb-corner{
  border:50px solid;
  border-color:transparent transparent #d9542b;
  width:0px;
  height:0px;
  position:relative;
  float:right;
  top:-149px;
  right:-145px;
}
</style>
</head>

<body>
    <div id="container">
      <div id="lt-corner"></div>
      <div id="lb-corner"></div>
        <div id="navBar">
            <ul id="menu">
                <li><a href="#">&#10029; Home</a></li>
                <li><a href="#">&#10029; About</a></li>
                <li><a href="#">&#10029; Services</a></li>
                <li><a href="#">&#10029; Contact</a></li>
            </ul>
        </div>
        <div id="rt-corner"></div>
      <div id="rb-corner"></div>
    </div>    
</body>
</html>

【问题讨论】：

在我看来不错，我的意思是有一个垂直滚动条，但我在 Safari 和 Firefox 的底部看不到边距。
当我在jsfiddle 中尝试此操作时，在注释掉高度时无法重现该问题：100%；
请使用图片，这样你就可以在页面底部看到页边距了，我已经在 Chrome 和 Firefox 中测试过了。
我已经更新了我帖子中的 jsFiddle 和 codePen 链接，请在页面底部查看。
或者，使用 /show/ 路径查看没有 iframe 的 jsFiddle。删除 /show/ 以返回 jsFiddle 编辑屏幕。 LINK

标签： html css xhtml background position

【解决方案1】：

这是一个工作示例：JSbin。确保编辑和使用它。

将margin:0 和padding:0 添加到html 和body 元素。要删除底部的margin，只需从body 元素中删除height:100%。所以这是基本的 CSS：

html,body{ 
  margin:0;
  padding:0;
}

html{
  background:#77d5fb url('http://i.imgur.com/xbMWo.jpg') bottom center no-repeat; 
  height:100%;
  width:100%;
}

body{
  background:transparent url('http://i.imgur.com/2NPJi.png') top center no-repeat; 
  width:100%;
}

旁注：如果它解决了您的问题，请务必标记为答案。

【讨论】：

嘿，abdhoms，我已经尝试了一切，但仍然无法正常工作。由于 DOCTYPE，它在 JSbin 上工作。在本地尝试它只有在您不包含 DOCTYPE 时才会起作用。但是如果你包括 DOCTYPE 那么问题又来了，奇怪但怎么办？这是 DOCTYPE 错误哈哈
这不是一个真正的错误。恰好是样式高度/宽度的问题。请参阅this question. 您的问题可以通过在您的 css 中添加 height:100% 和 width:100% 到 html 来解决。
如果有下边距，请尝试从body 中删除height:100%。我已经更新了答案。
告诉你们已经解决了。仅当您不包含 DOCTYPE 时它才会起作用。但是如果你包含 DOCTYPE 那么问题又来了。