2

背景画像を形成するために繰り返される小さな .png ファイルがあります。bodyコンテンツ ラッパーで min-height プロパティを使用するには、ページの高さを 100% に設定する必要があります。ただし、background-image と組み合わせて使用​​しようとするとheight:100%、ページをスクロールしたときに画像が途切れてしまいます。私が意味することを詳しく説明するには、写真を参照してください。

背景は上 ここに画像の説明を入力 だがスクロールすると途切れる

ユーザーが下にスクロールした後でも、ページ全体で背景画像を繰り返すにはどうすればよいですか? CSSは次のとおりです。

body {  
    background-color:#9AAEBF; 
    overflow-y:scroll;
    height:100%;
}

html:after {
    background-image: url('http://www.example.com/img/background.png');    
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

アイデアをありがとう。

編集：

これは私が繰り返す必要がある画像です:

画像の繰り返し

ここにフィドルがあります：

http://jsfiddle.net/Nick_B/x2h3g/

4

3 に答える 3

1

これを試して 

html:after {
    background-image: url('http://www.example.com/img/background.png');    
    background-repeat:repeat;
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
于 2013-03-04T05:36:37.113 に答える
0

今は慣れたbackground-size

このように

body {  
    background-color:#9AAEBF; 
    overflow-y:scroll;
    height:100%;
}

html:after {
    background-image: url('http://i.stack.imgur.com/iuzZU.png'); 
    background-size:100%;
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

デモ 全ページ

ライブデモ

于 2013-03-04T05:41:08.967 に答える
0

あなたはあなたの望む結果を達成することができbackgroun-size:100%ますhtml:after

CSS

html:after {
    background-image: url('http://i.stack.imgur.com/iuzZU.png'); 
    background-size:100%;
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
于 2013-03-04T05:42:24.450 に答える