Svg as a CSS Background - How to Repeat-X with No Space in Between

SVG as a CSS Background - Is there ANY way to repeat-x with NO space in between?

It seems that some browsers do have trouble with repeating backgrounds made from SVG images.

One solution to this is to do the repeating inside the SVG instead. We can use a <pattern> element to define the repeating pattern and use that to fill a rectangle.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="24">  <defs>    <pattern id="bg" patternUnits="userSpaceOnUse" width="130" height="24">      <path fill="#A5EF8B" d="M0,12c32.5,0,32.5,12,65,12s32.5-12,65-12V0C97.5,0,92.9,12,65,12C32.5,12,20.7,0,0,0"/>    </pattern>  </defs>  <rect width="100%" height="100%" fill="url(#bg)"/></svg>

White Space Between SVG Background Repeats

If it's what I think it is, open up your SVG file and change the root <svg> element so that it includes the following attribute:

<svg ... preserveAspectRatio="none">

If it already has a preserveAspectRatio attribute, just change it to "none" and reload.

Background image tiles have gap between them when using SVG image. How to solve in Chrome?

This turned out not just to be happening it Chrome, but it was more noticeable in that browser. As I posted above, here is the solution:
After reading a solution for a slightly different Chrome/svg problem I figured out the answer. Posting back here in case someone else runs across this issue. I created my SVG file in Illustrator. Apparently my artboard/image size was not in precise pixels. I discovered this by opening my SVG file in a text editor and looking at the top of the file I saw this :

width="229.9999px" height="147.4256px" 

I opened the svg file in illustrator and made sure that the dimensions were exactly even pixels, then double checked again in the text file. Corrected dimensions were:

width="230px height="148px"

For some reason simply editing the values in the text file did not work for me, but then again it was faster to just fix in Illustrator than figure out how to edit the svg text file correctly. At any rate, now I do not have a gap in my tiles. Hope that helps someone else if they are having this problem.

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

white-space after/before background image repeat

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

SVG background repeat-x in IE

you need to set also a background-size:

here you need:

.wave {
    background-image: url(http://ineedhelp.tk/svgrepeat/images/wave.svg);
    height: 150px;
    margin: 0 auto;
    margin-top: -150px;
    background-repeat: repeat-x;
  background-size:150px 150px;
    overflow:hidden
}

* {    margin: auto;    padding: 0;}
body {    background-color: white;}
h1 {    text-align: center;    color: #212121;    font-family: 'Josefin Sans', sans-serif;    font-weight: 300;    font-size: 40px;    text-transform: uppercase;    letter-spacing: 2px;    position: relative;    top: 17vh;    line-height: 1.2;}
a {    color: #212121;    font-family: 'Josefin Sans', sans-serif;    font-weight: 300;    font-size: 30px;    text-transform: uppercase;    letter-spacing: 2px;    position: relative;    line-height: 1.2;    text-decoration: underline;    text-align: center;    margin: 0 auto;    top: 10px;}
h3 {    text-align: center;    color: #212121;    font-family: 'Josefin Sans', sans-serif;    font-weight: 300;    font-size: 40px;    text-transform: uppercase;    letter-spacing: 2px;    position: relative;    top: 17vh;    line-height: 1.2;}
.water {    background-color: #E4F2EF;    width: 100%;    height: 40vh;    bottom: 0;    position: fixed;}
.wave {    background-image: url(http://ineedhelp.tk/svgrepeat/images/wave.svg);    height: 150px;    margin: 0 auto;    margin-top: -150px;    background-repeat: repeat-x;  background-size:150px 150px;    overflow:hidden}
.bottlepost {    background-image: url(http://ineedhelp.tk/svgrepeat/images/bottlepost.svg);    height: 150px;    background-repeat: no-repeat;    margin-left: 30vw;}
.bottlepost2 {    background-image: url(http://ineedhelp.tk/svgrepeat/images/bottlepost2.svg);    height: 120px;    background-repeat: no-repeat;    margin-left: 60vw;    margin-top: -90px;}

/* Fish */
.fish {    width: 100px;    height: 100px;    top: 50%;    right: 50%;    background: #CE716C;    position: absolute;    animation: 10s fly infinite linear;    transform: translateX(-50%);}

/* Shadow */
.shadow {    width: 100px;    height: 20px;    background: rgba(0, 0, 0, .15);    position: absolute;    top: 310px;    animation: 10s fly2 infinite linear;    border-radius: 50%;}

/* Eye */
span:nth-of-type(1) {    width: 10px;    height: 10px;    background: #e4f2ef;    border-radius: 50%;    z-index: 9;    display: inline-block;    position: absolute;    margin: 70px 0 0 7px;}

/* Fish tail fin */
span:nth-of-type(2) {    width: 50px;    height: 50px;    background: #CE716C;    position: absolute;    top: -25px;    left: 70px;}
span:nth-of-type(3) {    width: 50px;    height: 50px;    background: #e4f2ef;    position: absolute;    top: -50px;    left: 95px;}

/* Fish fly */
@keyframes fly {    0%,    100% {        right: 10%;        transform: rotateY(180deg) rotate(45deg);        top: 150px;    }    1% {        transform: rotateY(0deg) rotate(45deg);    }    25% {        top: 180px;    }    49% {        transform: rotateY(0deg) rotate(45deg);    }    50% {        right: 90%;        top: 150px;        transform: rotateY(180deg) rotate(45deg);    }    75% {        top: 180px;    }}

/* Shadow fly */
@keyframes fly2 {    0%,    100% {        right: 10%;        transform: rotateY(180deg);        width: 60px;        height: 10px;    }    1% {        transform: rotateY(0deg);    }    25% {        width: 100px;        height: 20px;    }    49% {        transform: rotateY(0deg);    }    50% {        right: 90%;        transform: rotateY(180deg);        width: 60px;        height: 10px;    }    75% {        width: 100px;        height: 20px;    }}

/* 404 */
.fishs1 {    background-image: url(http://ineedhelp.tk/svgrepeat/images/fish.svg);    height: 150px;    background-repeat: no-repeat;    margin-left: 20vw;    margin-top: -120px;}
.fishs2 {    background-image: url(http://ineedhelp.tk/svgrepeat/images/fish2.svg);    height: 100px;    background-repeat: no-repeat;    margin-left: 50vw;    margin-top: -300px;}
.fishs3 {    background-image: url(http://ineedhelp.tk/svgrepeat/images/fish3.svg);    height: 80px;    background-repeat: no-repeat;    margin-left: 75vw;    margin-top: 30px;}
h6 {    text-align: center;    color: #5DACAF;    font-family: 'Josefin Sans', sans-serif;    font-weight: 300;    font-size: 35vh;    text-transform: uppercase;    letter-spacing: 2px;    position: relative;    margin-bottom: 10px;    line-height: 1.2;    text-shadow: 5px 5px rgba(33, 33, 33, 0.08);}

<h3><b>Hello</b>, my page is coming soon.<br></h3>    <div class="water">        <div class="wave"></div>        <h6>404</h6>        <div class="fishs1"></div>        <div class="fishs2"></div>        <div class="fishs3"></div>    </div>

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.

---

Related Topics