空白の領域にのみCSSの背景イメージ

Question

main div内に小さなdiv boxがあります。 main divは背景イメージを使用します。私はbox divと背景イメージにテキストを追加して、背景イメージがテキストの後の空白領域にのみ表示されるようにします。 したがって、ボックス内のテキストにはメインdivの背景イメージがあり、ボックスdiv内の空白領域の残りの部分には別の背景イメージがあります。ここにhtmlがあります：

 <div class="main">//width = x 
      <div class="box"> //width = x 
       <span class="text">Text, no bg. </span> // width = y 
       <!-- need bg here in x-y area.--> 
      </div> 
     </div> 

希望します。

編集：私のJsfiddleのリンクをここで確認してください：http://jsfiddle.net/zr9Ks/ 私がしようとしているのは、ボックスdiv内のスパンの下にあるメインdivと同じ背景を持ち、テキストの後にdiv bgを押します。

Answer 1

私はあなたが後になっている効果がよりよく理解できるようになりました。

http://jsfiddle.net/LQydR/

Answer 2

背景が必要な場合は、左に移動することができます。 @Elenの言うとおり、あなたが期待していることは少し不明です。とにかく、背景はこのようなものであるシフト：ブロック：

.main { 
    width:300px; 
    background-image:url('mainbg.png'); 
} 


.text { 
    width:100px; 
    background:none; 
} 

.box { 
    width:300px; 
    background-repeat:no-repeat; 
    background-position:100px 0; 
    background-image:url('boxbg.png'); 
} 

ベア念頭にまたがる幅するために、あなたは、ディスプレイにそれを作る場合を除き内のテキストの幅がかかります従わないであろう。

.box { 
    width:300px; 
    padding-bottom: [height of the img]; 
    background: url('img.png') repeat-y left bottom; 
} 

Answer 3

は、私は私はあなたが必要なものを理解だと思います行く。

Answer 4

私が正しくあなたの質問を理解している場合、すべてを行う必要が.main上と.boxに異なる背景画像/色を宣言することで、あなたは良いしている：