3

背景画像がつぶれることなく、使用可能なスペース全体をカバーするようにします。
実際にはそれbackground-sizeが目的だと思っていましたが、うまくいかないので何か間違っていると思います。助けてください。

HTML

<div class="myDiv">
    <p class="paragraph">Lorem Ipsum</div>
</div>

CSS

body {
    background-color: black;
}

.myDiv {
    color: white;
    background: url('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png') no-repeat center center fixed; 
    background-size: cover;
}

フィドル
http://jsfiddle.net/V7KSb/

4

4 に答える 4

5

body と html の高さを 100% にし、div についても同様にします

body, html{
    height:100%;
    padding:0;
    margin:0;
}
.myDiv {
    color: white;
    background: url('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png') no-repeat center center fixed; 
    height:100%;
    padding: 20px;
    box-sizing: border-box;
}

フィドルを参照してください: http://jsfiddle.net/V7KSb/5/

更新:myDivいくらかのパディングが与えられbox-sizing: border-box;、100% を超えないようにするために使用されます。

于 2013-03-01T16:22:58.713 に答える
2

問題は、背景が div にあり、div が十分に大きくないことです。div に背景が必要な場合は、次のようにしてみてください。

.myDiv, body, html {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

jsFiddle: http://jsfiddle.net/jdwire/V7KSb/3/

于 2013-03-01T16:24:22.857 に答える
0

すべてのブラウザーで 100% の div の高さを実現するには、両方を設定する必要がhtmlありbodyます:

min-height: 100%;
height: auto !important;
height: 100%;
于 2013-03-01T16:29:38.107 に答える