我如何得到我的背景來拉伸整個頁面

-1

我知道這已被問到我以爲我做得正確，但它只是延伸內容的高度。我如何得到我的背景來拉伸整個頁面

這是我的例子：

enter image description here

我的CSS如下：

body 
{ 
    background-color: #ffffff; 
    font-size: .85em; 
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 
    color: #4c89b6; 

     background-image: url('../Content/images/tribackground.png'); 
     background-repeat: repeat-x; 
     background-size: 1px 100%; 

}

如何得到這個與背景填充頁面有什麼建議？

======= ======= UPDATE

我進行了更改爲以下內容：

body 
{ 
    background-color: #ffffff; 
    font-size: .85em; 
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 
    color: #4c89b6; 

    backgound-size: cover; 
    background-image: url('../Content/images/tribackground.png'); 
    background-repeat: repeat-x; 
}

我也試過：

body 
{ 
    background-color: #ffffff; 
    font-size: .85em; 
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 
    color: #4c89b6; 

    background-size:100%; 
    background-image: url('../Content/images/tribackground.png'); 
    background-repeat: repeat-x; 
}

兩個這樣做：

enter image description here

來源

2013-03-27 ErocM

從您的問題中包含的圖像中可以看出，當圖像上升時，圖像會逐漸消失，您只能在頁面底部重複該圖像。如果情況並非如此，他們已經給出的答案完全覆蓋了這個問題。

默認情況下，背景圖像將水平和垂直重複，直到它覆蓋整個背景區域。如果您想要在整個空間中展開一幅圖像，請參閱其他答案。如果你想要在水平在屏幕的底部重複圖像而不是垂直方向，那麼你將需要添加：

background-attachment: fixed; 
background-position: bottom;

，並去除背景大小：屬性。這會導致圖像停留在屏幕底部，並且如果內容從屏幕底部延伸，則文本將滾動到屏幕底部。如果你的內容沒有填滿整個屏幕，圖像仍然會在頁面底部重複。

如果您刪除background-attachment：屬性，則圖像將在內容區域的底部重複，而不是在屏幕的一部分或滾動完全離開屏幕底部。

來源

2013-03-27 16:08:47

在現代瀏覽器

可以使用

backgound-size: cover;

這裏列出幾個不同的approches： http://css-tricks.com/perfect-full-page-background-image/

但這裏的主要問題是，你的身體/ HTML沒有100％以上的高度。它可能會工作，如果你只是用：

body, html { 
    min-height: 100%; 
}

來源

2013-03-27 15:17:53 meo

你可以嘗試：

background-size: 100% auto; # width and height, can be %, px or whatever.

來源

2013-03-27 15:18:17 TheEwook

背景尺寸：100％;

您的版本（1px 100％）限制了高度。

來源

2013-03-27 15:19:57

我如何得到我的背景來拉伸整個頁面

回答

相關問題