0

背景画像をhtmlページ全体に設定しようとしていますが、毎回失敗しています。ストレッチではありません.cssとhtmlコードは次のとおりです。

CSS コード:

body {
    background-image:url(body_background.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width:1200px;
    margin:0 auto;
}

#main_container_div {
    padding: 0px;
    width: 1000px;
    margin-top: 30px;
    margin-left: 150px;
}

#div2 {
    float: left;
    width: 250px;
    height: 600px;
    margin-top: 0px;
    margin-right: 0px;
    background-repeat: no-repeat;
}
#div3 {
    position: relative;
    float: left;
    width: 750px;
    height: 500px;
    margin-top: 50px;
    overflow: hidden;
}

HTML 本文:

<body>    
    <div id="main_container_div">
        <div id="div3">
        </div>
        <div id="div2">
        </div>
    </div>
</body>

1366x768 サイズの画像で試すことができます。また、1366x768 の解像度でこれを試しています。これ以上の解像度で問題が発生することに注意してください。ご協力ありがとうございます。

4

8 に答える 8

3

背景サイズを試してください：CSSでカバーしてください

background-size:cover;
于 2013-02-05T10:54:20.297 に答える
1

体内には使用しないでください。次のように html 要素で試してください。

html
{
  background-image: url('your url');
  background-repeat: no-repeat;
  min-height:100%;
}

<html>
  <!--bg is applied here instead -->
  <body>
    ...
  </body>
</html>
于 2013-05-16T11:56:04.547 に答える
0 
background-size:cover;

動作しますが、すべてのブラウザ タイプをサポートしているわけではありません。ここに私が過去に使用したコードがあります、

section#background { 
    background: url('../img/background/feature.jpg') no-repeat center center; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/background/feature.jpg',sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/background/feature.jpg',sizingMethod='scale')"; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; }

ここにjsfiddlerリンクがあります

http://jsfiddle.net/Raver0124/3AwHa/1/

于 2013-05-16T12:08:15.630 に答える
0 
background: url(body_background.png) 100% 100% no-repeat;
background-size: cover;
于 2013-02-05T11:16:36.867 に答える
0

私は同じ問題を抱えていましたが、画像を引き伸ばすことで解決できます：

html{
    min-height: 100%;
}

または、同じ比率を維持するには、次のことができます。

body{
    background-size: cover;
    background-attachement: fixed;
}
于 2021-01-03T11:47:30.917 に答える
-1

ページ全体に背景を表示したい場合は、背景を繰り返しに設定する必要があります。

background-repeat: no-repeat;

に

background-repeat: repeat-x;

また

background-repeat: repeat-y;
于 2013-02-05T10:50:54.710 に答える