css - 繰り返しの背景を少し左に移動してから繰り返します

Question

下のリンクの風景である繰り返し背景画像には、最初の画像が終了して繰り返しが始まる後に空白があります。

.svg をビットマップにラスタライズせずにトリミングする方法はないと思うので、空白をカバーするために繰り返しの前に背景を左に移動するにはどうすればよいですか?

これが起こっている場所へのリンクは次のとおりです: https://dl.dropboxusercontent.com/u/270523/help/search/new.html

Answer 1

代わりに .png だけを使用できないと仮定すると、CSS3 の代替手段は次のような回避策になります。

#input {
  background:
  url(dawn.svg) 1512px 0 no-repeat,
  url(dawn.svg) 756px 0 no-repeat, 
  url(dawn.svg) 0 0 no-repeat
}

もちろん、IE8 以下の問題は残りますが、これが問題になる場合は、個人的には、ギャップのある背景を 1 つだけ繰り返して説明したいと思います。