Can You Create Space Between Background Image Repeats

Handle space between repeated background image?

Answer base on this.

Suppose we have an apple image:

Step 1. Convert this image to Base64

For example you'll get

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAMDAwMDAwQEBAQFBQUFBQcHBgYHBwsICQgJCAsRCwwLCwwLEQ8SDw4PEg8bFRMTFRsfGhkaHyYiIiYwLTA+PlQBAwMDAwMDBAQEBAUFBQUFBwcGBgcHCwgJCAkICxELDAsLDAsRDxIPDg8SDxsVExMVGx8aGRofJiIiJjAtMD4+VP/CABEIAB4AKAMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAAECAUGBwMJ/9oACAEBAAAAAHF7EAEzEstyjOveEdsam+kw+VE5cxH/xAAXAQEAAwAAAAAAAAAAAAAAAAAEAwUG/9oACAECEAAAAMMmE7K3/8QAFwEBAAMAAAAAAAAAAAAAAAAABgMEBf/aAAgBAxAAAAC+sMIJc3//xAAsEAACAQIFBAAEBwAAAAAAAAABAgMEBQAGERIhBxMxQQgyUXEUI0JhYoGR/9oACAEBAAE/AFihQhnZdDhVZjpHFJJzxxtH+nAo6twSe1GPZPOmCkM9wegWWSaSOESylNuyPcdFVuddzaEgfQYeiWJP1Ff74xRWqBF02DuIdHJ5P3xHSgsVPJQDUfTd4Jx1Vzla6LMFfarhUSxx0dLEYo18F5Ru3EYqeplytzSw0s0csZPl4l3Bh4dW03A46EZwuOesiGruJMtTQ1r0jTnzKqqHUn+QDaHE2eZE7kixUsTGIoGJYjX0T9jix5/6mSdVaCkatmpWgucb1w3kwyQw8yFm1O8OuPiNgjzFVx5ntU8ImECU9dTAkb1T5JF3eSPBGLLQXK/3OGgp4vzJXA3yHtov7sx9DHTentmQMqUllpUirNjNNPO+4d2aT5mC68D0Mfi3UEKijjFJZTBf4KsFdy1IcnU6nnHUCaW4TR0xSMRRjdt9E4ioxBMrqiBkYEEeiMZau0lZa43mjVnHBP10x//EAB0RAAEEAwEBAAAAAAAAAAAAAAIAAQMSBBFBE1H/2gAIAQIBAT8AdRQeveIwICcfigySC9htsVjZlIdU2/HRzyOT7d1//8QAHxEAAgIDAAIDAAAAAAAAAAAAAQIDEQAEEhMhBhQi/9oACAEDAQE/AMg+NI+kmxNteMuoZV5v0cnjMEzx2DyavNVDFDMsZUB669Xg+2IUTyjkD8jH1kZyWom8/9k=

Step 2: Insert this Base64 to SVG

'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="40"><image width="40" height="40" xlink:href="[paste it here]" /></svg>');

Step 3: copy this to CSS background-image

To get 10px space we have 50px width for CSS background-image, 40px for image tag of svg, 50 – 40 = 10 px.

body {    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="50" height="40"><image width="40" height="30" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAMDAwMDAwQEBAQFBQUFBQcHBgYHBwsICQgJCAsRCwwLCwwLEQ8SDw4PEg8bFRMTFRsfGhkaHyYiIiYwLTA+PlQBAwMDAwMDBAQEBAUFBQUFBwcGBgcHCwgJCAkICxELDAsLDAsRDxIPDg8SDxsVExMVGx8aGRofJiIiJjAtMD4+VP/CABEIAB4AKAMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAAECAUGBwMJ/9oACAEBAAAAAHF7EAEzEstyjOveEdsam+kw+VE5cxH/xAAXAQEAAwAAAAAAAAAAAAAAAAAEAwUG/9oACAECEAAAAMMmE7K3/8QAFwEBAAMAAAAAAAAAAAAAAAAABgMEBf/aAAgBAxAAAAC+sMIJc3//xAAsEAACAQIFBAAEBwAAAAAAAAABAgMEBQAGERIhBxMxQQgyUXEUI0JhYoGR/9oACAEBAAE/AFihQhnZdDhVZjpHFJJzxxtH+nAo6twSe1GPZPOmCkM9wegWWSaSOESylNuyPcdFVuddzaEgfQYeiWJP1Ff74xRWqBF02DuIdHJ5P3xHSgsVPJQDUfTd4Jx1Vzla6LMFfarhUSxx0dLEYo18F5Ru3EYqeplytzSw0s0csZPl4l3Bh4dW03A46EZwuOesiGruJMtTQ1r0jTnzKqqHUn+QDaHE2eZE7kixUsTGIoGJYjX0T9jix5/6mSdVaCkatmpWgucb1w3kwyQw8yFm1O8OuPiNgjzFVx5ntU8ImECU9dTAkb1T5JF3eSPBGLLQXK/3OGgp4vzJXA3yHtov7sx9DHTentmQMqUllpUirNjNNPO+4d2aT5mC68D0Mfi3UEKijjFJZTBf4KsFdy1IcnU6nnHUCaW4TR0xSMRRjdt9E4ioxBMrqiBkYEEeiMZau0lZa43mjVnHBP10x//EAB0RAAEEAwEBAAAAAAAAAAAAAAIAAQMSBBFBE1H/2gAIAQIBAT8AdRQeveIwICcfigySC9htsVjZlIdU2/HRzyOT7d1//8QAHxEAAgIDAAIDAAAAAAAAAAAAAQIDEQAEEhMhBhQi/9oACAEDAQE/AMg+NI+kmxNteMuoZV5v0cnjMEzx2DyavNVDFDMsZUB669Xg+2IUTyjkD8jH1kZyWom8/9k=" /></svg>');}

can you create space between background image repeats?

background-repeat: space;
background-repeat: round; // round(520 / 100) = round(5.2) = 5

The browser will render five images in the space but adjust the image width to 104px (520px / 5). The image is made wider to fit the container. Full details here
or read
Background Size property

CSS, background-repeat distance

I guess the ship has pretty much sailed, but still there is a solution based on data-URI.

You can generate an SVG containing your image which has a size greater than the image (e.g. to make the margin 60px just make a width equal to the width of the image (40px) + the desired margin (60px) = 100px):

The next step is embedding your image inside of the SVG:

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

And finally add this SVG as a background-image with the data 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;
}

See the updated Fiddle.

One can say this is quite a big and dirty workaround. However this is a pure CSS solution which does not require creating of additional HTML elements / JavaScript. It has some disadvantages:

1. You need to embed the image with the data-URI. This is probably not the thing you would like to do often.
2. The solution looks a bit heavy.
3. For IE9 you would need to encode the SVG as a URL.

Possible solution to all these problems is using CSS preprocessors, e.g. Sass. You can make a mixin, e.g.:

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

You can add here many things, e.g. all other margin values, you can encode the image to inject it instead of writing it manually using Compass, see e.g. this article to learn more about this process. This already looks way better and more comfortable to use.

Spacing between alternating background images

See demo here.

Here's a function you can use:

function changeBodyBackground() {
    var images = ['http://goo.gl/tQl3t', 'http://goo.gl/6t3lG',
                                                          'http://goo.gl/HDzqs']
    var imagesWidth = 260;
    var screenWidthToCover = 3000; // the max resolution expected
    var i = 1, backgroundStyle = 'url("'+images[0]+'") 0 0 no-repeat';
    while (i*imagesWidth < screenWidthToCover) {
        backgroundStyle += ', url("'+images[i%images.length]+'") '
                                               +(imagesWidth*i)+'px 0 no-repeat';
        i++;
    }
    document.body.style.background = backgroundStyle;
}

Edit the images array with the URL of the images you need. They will be placed side-by-side with the order given in the array. Also, the spacing between the images is defined by the imagesWidth variable.

In the demo the background is being set when the button is clicked. You can, of course, call the function at the <head>, if you want the background images to be loaded right away.

Repeating background vertically with space

For the moment, this is impossible. You will have to add the space in the image itself.

white-space after/before background image repeat

A little transparency on each side is in the image file. Crop the image.

Space between two background images

You need to modify the background-position value for the 2nd image separated by a ,

150px is the horizontal offset from the start point of the images and should be greater than the size of the first image.

.widget-title {  height: 45px;  padding-left: 70px;  background-image: url('http://placehold.it/100x100'), url('http://placehold.it/100x100/333');  background-repeat: no-repeat;  background-position: 20px 10px, 150px 10px;}

<div class="widget-title"></div>

---

Related Topics