不能將圖片放在頁面頂部

我正在創建一個網站，我在頁面頂部放置了一個圖像。儘管我已將頂部邊距設置爲0，但圖像並未附加到頂部。圖像從頂部向下5px左右。我的HTML和CSS代碼不能將圖片放在頁面頂部

<div id="maindiv"> 
<div id="header"> 


</div> <!-- header div --> 
    <nav class='navigation main-navigation'> 
     <ul class='menu main-menu'> 
      <li class='menu-item'> 
       <a class='three-d' href='/'> 
        <span title='Home'>Home</span> 
       </a> 
      </li> 
      </ul>

我的CSS代碼

#maindiv { 
width: 900px;  
margin: 0px auto;  
background: #fff url(banner.jpg) no-repeat;

}

#header {height:200px}

你可以看到有在圖像上的一些空間。我希望圖像位於頁面的頂部。

http://i.stack.imgur.com/VEwLF.jpg

來源

2014-09-24 Anbu

嘗試使用重置樣式表。我們可以輕鬆避免這些問題。例如：http://meyerweb.com/eric/tools/css/reset/ – 2014-09-24 08:48:17

爲你的圖片設置背景位置 – Feroza 2014-09-24 08:49:02

add'body {margin：0;}'css規則 – Damien 2014-09-24 08:51:53

發生這種情況是因爲Chrome的應用本身加上了8px到<body>元保證金。

插入以下CSS到您的代碼將解決這個問題：

html, body{ 
margin:0; 
}

爲了保持圖像居中還添加以下到#maindiv CSS樣式：

background-position:top center;

見JSFIDDLE演示

來源

2014-09-24 08:47:27 henser

它可以工作，但圖像移動到左側。 .i需要把它放在中心 – Anbu 2014-09-24 08:59:49

http://i.stack.imgur.com/Ek9RF.jpg – Anbu 2014-09-24 09:04:58

更新了答案...檢查JSFIDDLE - > http://jsfiddle.net/henser/omzj0aar/1 – henser 2014-09-24 09:07:11

只需將此添加到您的代碼中：

#maindiv { 
width: 900px;  
margin: 0px auto;  
background: #fff url(banner.jpg) no-repeat; 
position:fixed; // or position:relative; 
top:0;  
} 

#header {height:200px}

來源

2014-09-24 08:47:43

它的作品，但圖像移動到左側..我需要把它放在中心 – Anbu 2014-09-24 08:56:42

在你的CSS文件中添加此

*{margin:0 auto; padding:0px;}

它會刪除所有默認邊距和填充

來源

2014-09-24 08:48:02 himanshu

它的作品，但它是一個壞主意。去除身體的邊距和填充就足夠了。 – putvande 2014-09-24 08:49:01

但爲什麼它是壞主意 – himanshu 2014-09-24 08:50:49

要從所有內容中刪除所有邊距和填充。某些元素默認具有margin，如'ul'。您必須手動將邊距和填充重新添加到它們中，如果您僅從主體中刪除填充和邊距，則不必要這些邊距和填充。 – putvande 2014-09-24 08:52:58

不能將圖片放在頁面頂部

回答

相關問題