Css, Background-Repeat Distance

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

Repeating background vertically with space

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

---

Related Topics