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>

And when used as a background-image to a <div>, it becomes:

div {
  margin: 4rem 0;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='24'%3E%3Cdefs%3E%3Cpattern id='bg' patternUnits='userSpaceOnUse' width='130' height='24'%3E%3Cpath fill='%23A5EF8B' 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'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23bg)'/%3E%3C/svg%3E");
  background-size: 100% 24px;
  background-repeat: no-repeat;
}
<div></div>

This is your svg used as a css background and there are no gaps. I've encoded the svg using this tool

Also please read Optimizing SVGs in data URIs

body{background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 130 24' xml:space='preserve' preserveAspectRatio='none'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23A5EF8B;%7D %3C/style%3E%3Cpath class='st0' 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'/%3E%3C/svg%3E%0A");
background-size:130px 24px}

UPDATE

Apparently in Safari there is a gap between the repetitions of the svg background image. In the next example I'm setting the background-size:12vw (or any other multiple of vw) the gaps disappear.

In fact I've simplified the path as well.

body{  
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 6 130 26' width='100%' height='100%'%3E%3Cstyle type='text/css'%3E .st0%7Bstroke:%23A5EF8B; fill:none; stroke-width:12;%7D %3C/style%3E%3Cpath class='st0' d='M-1,12c32.5,0,32.5,12,65,12s32.5-12,69-12'/%3E%3C/svg%3E%0A");
background-size:12vw}

Tags:

Css

Svg

Recent Posts