最初の画像の下に2番目の背景画像を繰り返します。

<div>レイヤーにbackground-imageという2つのインスタンスを使用しようとしています。 background-image最初は（部分的に透明である）<div>のtopに表示されるべきであり、第二は、（この動作）最初background-image直下に表示されるべきです。最初の画像の下に2番目の背景画像を繰り返します。

動的コンテンツのため、高さが1pxの2番目の画像を垂直方向に繰り返し（repeat-y）、最初のbackground-imageの下で繰り返し始めます。私の問題は、2番目の繰り返しを試みるときですbackground-imageそれは全体の<div>層にわたって繰り返されます。

.mainFrameRoundBorder { 
    border: none; 
    background: url(../images/theme_box_main_l.png), url(../images/theme_box_main_2.png); 
    background-repeat: no-repeat, repeat-y; 
    border-radius: 0 0 0 0; 
    box-shadow:0 0 0 0; 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-color: transparent; 
    background-position: center top, 0px 364px; 
    margin-top:10px; 
    padding: 6px 15px; 
    overflow: hidden; 
    color: #FFFFFF; 
}

出典

2012-01-08 user1137236

を使用することをお勧めします...あなたの説明は非常にではありません明らかです。 – pixelass

申し訳ありませんが、フィドルとはどういう意味ですか？ – user1137236

http://jsfiddle.netこのサービスを使用して、コードの小さな例を作成します。私はあなたのためにここから始めました：http://jsfiddle.net/pixelass/E9Xbu/ – pixelass

：beforeまたは：after擬似セレクタを使用することをお勧めします。いつものように、繰り返しの背景をdivに配置して、非繰り返しの背景を擬似セレクタ要素に配置することができます。

このチュートリアルでは、この方法であなたにいくつかの良いポインタを与えることができる必要があります：

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

出典

2012-01-08 16:20:59 mbxtr

これは通常動作します、私の問題は、上部の画像が部分的に透明であるため、背後にある繰り返し画像がきらめきます。 – user1137236

2番目の画像を繰り返してもらいたいと言っていますが、最初の画像が始まった後にのみ繰り返すようにしていますか？ – mbxtr

ほぼ、私は最初の画像が終了したときに、2番目の画像の繰り返しを開始したい。例えば、第1の画像の高さは300pxであり、第2の画像の高さは50pxである。ディビジョンは500pxの高さを持ち、2番目のイメージは300px（最初のイメージの下）から繰り返されます。この計算では4回繰り返す必要があります。私が今持っているのは、それが10回繰り返されることです（最初のイメージの背後でも繰り返されます）。 – user1137236

は、私はあなたがフィドルを投稿してくださいz-index

出典

2012-01-08 19:09:40

最初の画像の下に2番目の背景画像を繰り返します。

答えて

関連する問題