Menu
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):
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:
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;
}
549
To make a background image not repeat in HTML, specify no-repeat in the background-repeat property or the background shorthand property. The background image is set to 'no-repeat' using the 'background-repeat' property. The above example uses the background-repeat property to set the image to no-repeat .
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 images can be used as background-image in CSS as well, just like PNG, JPG, or GIF. All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.
The SVG background is used to draw any kind of shape, set any color you want by the set property. The below examples illustrates the concept of SVG set background-color more specifically. The SVG allowed the CSS background sizing, position, and much more complex property.
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.
172
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
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
