CSS, background-repeat distance

Je suppose que le navire a pas mal navigué, mais il y a quand même une solution basée sur les données-URI.

Vous pouvez générer un SVG contenant votre image qui a une taille plus grande que l'image (par exemple pour faire de la marge 60px il suffit de faire une largeur égale à la largeur de l'image (40px) + marge souhaitée (60px) = 100px):

La prochaine étape est l'incorporation de votre image à l'intérieur de la SVG:

<image width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=" />

Et enfin ajouter ce fichier SVG en tant que background-image avec les données URI:

#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;
}

Voir le jour Violon.

On peut dire que c'est assez gros et sale solution de contournement. Cependant, c'est un pur CSS solution qui ne nécessite pas de création supplémentaire d'éléments HTML /JavaScript. Il a quelques inconvénients:

1. Vous avez besoin d'incorporer l'image avec le data-URI. Ce n'est probablement pas la chose que vous aimeriez faire souvent.
2. La solution est un peu lourde.
3. Pour IE9 vous devez encoder le SVG comme une URL.

Possible solution à tous ces problèmes est d'utiliser les préprocesseurs CSS, par exemple Sass. Vous pouvez faire un mixin, par exemple:

@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=');
}

Vous pouvez ajouter ici beaucoup de choses, par exemple toutes les autres valeurs de marge, vous pouvez encoder l'image pour l'injecter au lieu de l'écrire manuellement à l'aide de la Boussole, voir, par exemple, cet article pour en savoir plus sur ce processus. Ce qui semble déjà bien mieux et plus confortable à utiliser.