Small Gap Between Background Repeat

Asked Apr 05 '16 at 23:16

Active Apr 05 '16 at 23:16

Viewed 342 times

So I've been playing around with CSS animations I can't seem to fix an issues with my background. I have a small, barely visible gap between my repeating waves.

There isn't a gap on the original image and I'm using an svg image if that makes any difference.

Any ideas? Thanks.

CSS

    .hero {
      background-image: url('waves.svg');
      background-repeat: repeat-x;
      background-position: left bottom;
      height: 500px; 
      position: relative; 
      background-size:50px auto;
}

HTML

    <div class="wrapper">
      <div class="hero">
        <img src="blue_robot.svg" width="350" alt="tall robot" class="clouds cloud1" />
        <img src="blue_robot.svg" width="350" alt="tall robot" class="clouds cloud2" />
        <img src="sailboat.svg" width="350" alt="tall robot" class="sailboat" />
     </div>     
   </div>

asked Apr 05 '16 at 23:16

Peekay

1

See if this helps - http://stackoverflow.com/questions/11201248/background-image-tiles-have-gap-between-them-when-using-svg-image-how-to-solve – Stickers Apr 05 '16 at 23:18
And there isn't a gap at the edges? Maybe a really small one? P.S. I don't notice it without zooming in FYI. – Emmet Arries Apr 05 '16 at 23:19
@Pangloss Awesome, it worked. Thanks – Peekay Apr 05 '16 at 23:34
@JeffArries it's barely noticeable, but still there. – Peekay Apr 05 '16 at 23:35

Small Gap Between Background Repeat

0 Answers0