css - 如何在整個窗口中拉伸背景圖像

Question

我在嘗試拉伸整個窗口時遇到的背景圖像有問題。 外部CSS如下：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg"); -webkit-background-size: cover; background-repeat: no-repeat; background-size: 70%;}
@font-face /* support for browsers & IE v10 onwards*/
{
    font-family:homefont; src: url("font3.ttf");
}

#main
{
    position:absolute;
    left:450px;
    top:30px;
    font-family: homefont;
    font-size:150px;
    line-height:70%;
}

這就是我所擁有的（請參閱瀏覽器窗口右側的空白區域）：

誰能告訴我如何在整個窗口拉伸圖像？

我已按照評論中的建議嘗試了建議，但是圖像似乎是從我的膝蓋向下切割的:(。還有其他建議嗎？

Answer 1

這是一篇關於你的css-tricks問題的axcellecnt文章

令人敬畏，簡單，進步的CSS3方式：

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;
}

Answer 2

你可以試試這個

background-size: 100%;

要么

background-size:cover

Answer 3

干得好：

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;
}

適用於：

Safari 3+
Chrome
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Answer 4

top center;background-size-110%;background-repeat- no-repeat

請根據需要增加尺寸。

Answer 5

將背景圖像縮放為盡可能大

您需要將background-size屬性與值cover一起使用，如下所示

body {
      background-image: url("mybackground.jpg");
      background-repeat: no-repeat; 
      background-size: cover;
      }

資源