Alpha Transparency around 100% width SVG

[Shutterlab]

Hi everyone,

Towards the top of my Home page, there's a 100% width SVG image. It's the red header pictured below:

The image is saved without a border and so I'm searching for a way to remove the slight alpha border around the edges. Does anyone know how I can l accomplish this? I'll put a link to the page below. Thanks in advance for your help!

Motion Minded Media Production and Design | Shutterlab Creative

[Preran]

Is your reference to the gap in between? I don't see any border around the edges.

Preran

[Shutterlab]

Yes. Sorry for the confusion, when I say border I'm referring to the alpha channel gap around the left/right edges of the image.

[DimitrisGR]

From Google Developers Tools:

url(../images/home%20page%20head%20tear%20red%20svg%20flattened.svg?crc=430369939) repeat-x center top;

This is your css.. Probapbly you have set for the background image TILE HORIZONTALLY ( 'repeat x' ).

Also your SVG image must have Stroke.

Click on Background Image and go to "FILL > FITTING > and select SCALE TO FILL" from the list or edit your SVG image (remove Stroke).

[Shutterlab]

It is set to tile horizontally, I'd like to tile the image seamlessly rather distort it based on screen resolution with scale to fill.

The image didn't have a stroke on it, but I added one that is the same color as the fill to be sure it wasn't affecting the gap area. After reuploading, the alpha gap persists. Is it possible to seamlessly tile an SVG image in Muse?

[DimitrisGR · Accepted solution]

Open your SVG fole with a text editor and add this: <svg ... preserveAspectRatio="none">

**FROM MDN EXPLAINATION**

In some cases, typically when using the viewBox attribute, it is desirable that the graphics stretch to fit non-uniformly to take up the entire viewport. In other cases, it is desirable that uniform scaling be used for the purposes of preserving the aspect ratio of the graphics.

Attribute preserveAspectRatio indicates whether or not to force uniform scaling.

Regards