2017-03-01 81 views
-1

看起來我的整個圖像不會一路走到最前面。HTML和CSS全圖像背景

html,body{ 
    height: 100%; 
    width: 100%; 
    color: #000; 
    margin: 0; 
    padding: 0; 
} 


.nav-bar{ 
font-size: 30px; 
text-align:center; 
position:relative; 
font-family:navfont; 
} 

.nav-bar > a{ 
    text-decoration: none; 
color: inherit; 

} 

.nav-bar a:hover{ 
    color:#FF0000; 
} 

.backgroundimg{ 
    background: url("../img/background.jpg"); 
    background-size: cover; 
    position: relative; 
    background-position: center center; 
    height: 100%; 
    width: 100%; 
    z-index:-1; 
} 

My image

+1

你的mar KUP?我們也需要看到你的HTML,所以我們有一個[mcve]來處理。如果您可以在示例中託管和包含您的背景圖像,這將有所幫助。 –

+0

這個CSS很好包含,但是你的HTML結構也會有幫助。 – scoopzilla

+0

從我看到的圖像中,您可以做的實際上是將背景圖像添加到BODY。現在你有兩個DIV。 – scoopzilla

回答

2

我想你應該在backgroundimg類添加到您的<body>標籤,因爲我敢肯定,你的HTML標記是這樣的:

<html> 
    <head> 
     ... 
    </head> 
    <body> 
     <nav> 
      ... 
     </nav> 
     <div class="backgroundimg"> 
      ... 
     </div> 
    </body> 
</html> 

並應更多類似這樣:

<html> 
    <head> 
     ... 
    </head> 
    <body class="backgroundimg"> 
     <nav> 
      ... 
     </nav> 
    </body> 
</html> 
+0

非常感謝你的工作哈哈。 –

+0

不客氣,您可以將問題標記爲已解決。 –