background-imageを設定しますが、繰り返しの間隔は特定してください。CSS、バックグラウンドリピート距離
例えば、私はbackground-imageになるために、このイメージを持っている：
そして、私はこのようなパターンで繰り返しを修正したい：
はJSFiddle playgroundをチェック
私はCSS3クリーンsolutiを探していますJSではなく、余分な要素などではありません。私が非常に現代的なCSS3（サポートされていない）トリックを使用しなければならない場合はOKです。
あなたは（CSS3）バックグラウンドリピートでspace属性を使用する必要が
http://www.impressivewebs.com/space-round-css3-background/
すべてのブラウザがそれをサポートし、それはサンプル画像によってその唯一の垂直方向のスペースのためのように見えません。
より良い選択した実際の画像の周囲に必要なスペース、私は、船はかなり出航していると思いますが、まだそこにある
（空白領域を持つ画像をパディング）を持つように背景画像自体を修正することですデータURIに基づくソリューション。
イメージよりも大きいサイズのイメージを含むSVGを生成することができます（たとえば、余白をイメージの幅（40px）と同じ幅にする+ 60px = 100px ）：
次のステップは、SVGの内側にあなたのイメージを埋め込むされています
<image width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=" />
そして最後にデータURIと背景画像としてSVGを追加します。
#container {
width: 300px;
height: 100px;
border: 1px solid #ccc;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="40"><image width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=" /></svg>');
background-position: left center;
background-repeat: repeat-x;
}
更新されたFiddleを参照してください。
これはかなり大きく汚れた回避策だと言えます。しかしこれは追加のHTML要素/ JavaScriptの作成を必要としない純粋なCSSソリューションです。
これらすべての問題の可能な解決策は、CSSプリプロセッサを使用することです。 Sass。ミックスインを作成できます（例：
@mixin background-image-spaced($width, $height, $margin-right, $image) {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="#{$width + $margin-right}" height="#{$height}"><image width="#{$width}" height="#{$height}" xlink:href="data:image/png;base64,#{$image}" /></svg>');
}
body {
@include background-image-spaced(40px, 40px, 60px, 'iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=');
}
）他のすべてのマージン値は、Compassを使用して手動で書き込むのではなく、イメージをエンコードして注入することができます。このプロセスの詳細についてはthis articleをご覧ください。これはすでに、より使いやすく快適に見えます。
'background-repeat：space'は' text-align：justify'と似ていますが、イメージの繰り返しの間隔を要素のサイズに合わせますが、このスペースをあなたの都合で定義することはできません。イメージのサイズを変更することは私の心の中では回避策です。誰かが別の解決策を提供するかどうかを見てみましょう。 – fguillen