添加DOCTYPE斷裂的背景圖像對齊

目前，我有下面的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; 
}

有代碼顯示我的背景圖像很好，但是當我按照引導程序的要求添加<!DOCTYPE html>時，我的背景圖像聲明似乎是「ignored」並且只顯示指定的背景色。

我已經做了一些測試，發現背景位置導致了問題。

隨着background-position: center bottom圖像將不會出現，但background-image: center將出現，它會出現，但居中在頁面的頂部，我需要它在底部。

我該如何下壓該背景圖片？

來源

2013-07-26 user1710563

@Fags不要再使用'doctype'。那是個老派。使用HTML5文檔類型：'<！DOCTYPE html>'。 – hungerstar

添加

html,body{min-height:100%}

你的CSS。

至於文檔類型，使用該

<!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>

享受！

來源

2013-07-26 06:52:25

你應該總是使用doctype，否則你將會在可怕和不可預知的地方開發出一種叫做quirksmode的地方，這不是你想要的。我建議你補充：

<!DOCTYPE html>

並嘗試解決你的小CSS問題，到位。

來源

2013-07-26 06:48:48

隨着增加，爲什麼不「背景位置：中心底部;」工作應該如何？ – user1710563

我敢打賭。鏈接到您的頁面。如果你的內容沒有佔用瀏覽器窗口的全部高度，那麼它會「出現」，好像它不在底部。 – hungerstar

添加DOCTYPE斷裂的背景圖像對齊

回答

相關問題