Question

目前我有以下HTML代码，因为您可以看到没有指定doctype：

<html lang="en">
    <head>
        <title>Website</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
        <!--[if gt IE 7]>
            <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
        <![endif]-->
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/plugins.min.js"></script>
        <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
    </head>
    <body>
        <div class="container">
            <div id="searchbar">
                <form action="#" method="POST">
                    <div class="input-append">
                        <input class="span2" id="appendedInputButton" type="text" />
                        <button class="btn" type="button">Go!</button>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

与以下style.css文件混合：

@font-face{
    font-family: Comfortaa;
    src: url('Comfortaa.ttf');
}

body{
    background-color: #77d5fb;
    background-image: url('bottom_bg.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    font-family: Comfortaa;
}

#searchbar{
    width:700px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -350px;
}

让代码显示我的背景图片就好了但是当我按照bootstrap的要求添加<!DOCTYPE html>时，我的背景图像声明似乎是“忽略”而且只有指定的背景颜色显示。

我做了一些测试，发现背景位置导致问题。

使用background-position: center bottom时，图片不会显示background-image: center，但它会出现，但会在页面顶部居中，我需要在底部。

如何按下背景图像？

Answer 1

你应该总是使用doctype，否则你将在一个叫做quirksmode的可怕和不可预测的土地上发展，这不是你想要的。我建议你补充一下：

<!DOCTYPE html>

并尝试修复您的次要CSS问题。

Answer 2

添加

html,body{min-height:100%}

到您的CSS。

至于doctype，请使用此

<!DOCTYPE HTML>

因此您的文档看起来有点像这个工作示例。尝试一下，您将看到图像的显示方式与您希望的一样。

  <!DOCTYPE HTML>
  <html>
  <head>
  <title>Title Here</title>
  <meta charset="utf-8">
  <style>
  html{
      min-height:100%;
  }
  body{
      min-height:100%;
      background-color: #77d5fb;
      background-image: url('bottom_bg.jpg');
      background-position: center bottom;
      background-repeat: no-repeat;
      font-family: Comfortaa;
  }
  #searchbar{
      width:700px;
      height:200px;
      position:absolute;
      left:50%;
      top:50%;
      margin:-100px 0 0 -350px;
  }
  </style>
  </head>
  <body>
  <p id="searchbar">Just testing!</p>
  </body>
  </html>

享受！

添加doctype会中断背景图像对齐

2 个答案: