2014-07-11 24 views
1

我是一個新手,我想弄清楚如何在我的網站上放置背景圖片。我已經鏈接了圖像,但它似乎只顯示了圖像的大約30%。 (只是照片的頂部顯示,整個過程中,但沒有底部)我想整個圖像作爲背景。圖像是594kb。只顯示部分圖像作爲我的背景圖像。我如何使用CSS獲取完整圖像作爲我的背景?

這裏是我的CSS:

#nav1 { 
    width: 100%; 
    float: left; 
    margin: 0 0 3em 0; 
    padding: 0; 
    list-style: none; } 

#nav1 li { 
    float: left; } 

#nav1 { 
    width: 100%; 
    float: left; 
    margin: 0 0 3em 0; 
    padding: 0; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; } 

#nav1 li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #069; 
    border-right: 1px solid #ccc; } 

#nav1 li a:hover { 
    color: #c00; 
    background-color: #fff; } 

.nav 
{ 
    position: fixed; 
    top: 0; 
} 

.jumbotron { 
    background-image: url(../images/image.jpg); 
    background-repeat: no-repeat; 
    min-width: 100%; 
    min-height: 100%; 
} 

.jumbotron { 
    padding:0px; 
} 

body { 
    font-family: 'Lobster', serif; 
    text-shadow: 4px 4px 4px #aaa; 
    text-align: center; 
} 

h1 { 
    font-size: 70px; 
    line-height: 4em; 
} 

h2 { 
    font-size: 95px; 
    line-height: 1em; 
} 

回答

3

你必須要記住,對於背景圖像,每個人都有不同的屏幕分辨率和尺寸。因此,在整個圖像沒有裁剪或弄亂圖像比例的情況下,在不同的屏幕尺寸下都是不可能的。

這是我首選的使用背景大小封面的簡單方法。 - 我從CSS技巧中瞭解到這點。

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}