CODEWITHSUNDEEP
htmlcsssvg
user4233921
user4233921

Reputation:

White Space Between SVG Background Repeats

I cannot seem to get rid of this white space between SVG element repeats (as CSS backgrounds) exported by Illustrator CS5.

I am using a simple CSS background-image and background-repeat: repeat-x but there is always this white space between each repeat. I am not using background-size at all.

Here is what I am seeing (tested on Safari/Chrome):

white space

If I open the SVG to check for any whitespace on the side, nothing is there (see window on the right) and it goes all the way to the side of the window:

no white space on separate window

I've tried saving the image in Illustrator by File -> Scripts -> SaveDocsAsSVG and Save as.. -> SVG.

HTML

<body>
    <div class="outer">
        <div class="inner">
        </div>
    </div>
</body>

CSS

.outer {
  background-color: #7fcefb;
  height: 700px;
  background-image: url('/wp-content/themes/grizzly/assets/img/trees.png');
  background-position: center 95%;
  background-repeat: repeat-x;
}

.inner {
  background-image: url('/wp-content/themes/grizzly/assets/svg/treeshill.svg');
  height: 700px;
  background-position: center bottom;
  background-repeat: repeat-x;
}

Upvotes: 19

Views: 8538

Answers (3)

SurferJoe
SurferJoe

Reputation: 985

I can't guarantee this will always work or even work in your situation, but you might try specifying the css background-size in pixels not as a percentage. This has worked for me in the past with chrome. i.e. background-size: 50px 100px;

Upvotes: 0

luis19mx
luis19mx

Reputation: 401

preserveAspectRatio="none" didn't work for me because it makes the svg to take the full width of its parent container.

Instead a take the parameters: preserveAspectRatio="xMinYMax meet" which in return I was able to use with background-repeat: repeat-x;

For more info here is an exellent article: A Look At preserveAspectRatio in SVG

Upvotes: 8

Paul LeBeau
Paul LeBeau

Reputation: 101830

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.

Upvotes: 43

Related Questions