正確的CSS定位幫助需要

基本上我想要做的是讓我的背景圖像填充頁面，並有我的導航，在我的頁腳頂部，並且都保持在底部。我嘗試了很多不同的東西，我似乎可以正確定位它們。我有一個非常基本的證明我想讓我的網站看起來像但我不能張貼圖片...任何幫助，非常感謝。正確的CSS定位幫助需要

這是我目前的HTML：

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<title>Nathan Langer</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 
<div id="wrapper="> 
<div id="name"> 
    <h1>Nathan Langer</h1> 
</div> 
<nav> 
    <ul> 
     <li><a href="resume.html">Resume<img src="images/resume   logo.png"width="35"height="35"><strong></strong></a></li> 
     <li><a href="portfolio">Portfolio<img src="images/portfolio logo.png" width="45"height="35"><strong></strong></a></li> 
     <li><a href="aboutme">What I Do<img src="images/camera logo.png" width="75"height="35"></a></li> 
    </ul> 
</nav> 
    <h3>For professional video and media production</h3> 
</div> <!-- close for wrapper --> 
</body> 
</html>

我的CSS：

body { 
background-image: url(images/cool.png); 

vertical-align: middle; 
background-size:100%; 
background-position: fill; 
background-repeat: no-repeat; 
    } 

#wrapper { 
    width: auto; 
    height: auto; 
    margin-left: auto; 
    margin-right: auto; 
    } 
#name { 
    text-align: center; 
    font-size: 35px; 
    color: white; 
    font-family: Herculanum, "Eras Demi ITC", sans-serif; 
    } 
nav{ 
position: relative; 
bottom: -550px; 
left: 250px; 
} 
nav ul { 
    list-style: none; 
    margin-right: -50px; 
    } 
li { 
display: inline; 
border: 2px solid rgb(256,256,256); 
font-family: Herculanum, "Eras Demi ITC", sans-serif; 
font-size:25px; 
border-top-left-radius:1em; 
border-top-right-radius:1em; 
background-color: #A3A3A3; 
padding: 10px 20px; 
} 

nav li a:hover {text-decoration:none ;} 
nav li a:visited {color: rgb(256,256,256);} 
nav li a:link {text-decoration:none; color: #989898;} 

h3 { 
text-decoration:none ; 
text-align: center; 
position: absolute; 
background-color: #A3A3A3; 
position: relative; 
bottom: -550px; 
color: white; 
}

來源

2014-06-19 Nate

爲背景大小，使用'cover' https://developer.mozilla.org/en-US/docs/Web/CSS/background-size – Huangism

您可以添加下面的CSS，它涵蓋了整個瀏覽器的背景圖像。

body { 
background: url(images/cool.png) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

來源

2014-06-19 16:57:54 th0ward

謝謝。這工作的背景，但我怎麼能讓他的導航欄坐在頁腳的頂部，並讓他們兩個調整與頁面的其餘部分？ – Nate

這是你在找什麼？

http://jsfiddle.net/6uAdA/11/

爲了使圖像覆蓋你需要做的body元素的背景及其background-size: 100% 100%和background-repeat: no-repeat（如果背景設置爲repeat，瀏覽器重複圖像，而不是拉伸它）。

要通知body背景什麼大小完全是100％，您需要給body及其父元素html定義大小。其中，在這種情況下，將是width: 100%;和height: 100%;。這確保了瀏覽器知道圖像相對於哪個尺寸。

CSS

html, body { 
    width: 100%; 
    height: 100%; 
} 
body{ 
    background-image: url("http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg"); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
}

來源

2014-06-19 16:49:19 gespinha

正確的CSS定位幫助需要

回答

相關問題