Gap in repeating image for background

[Sharktoes]

Howdy!
I’ve used some images to repeat in the background of some sections the site I’m hashing together, and I notice that there is about a 1 pixel line where the image repeats. It is faint, however it still bothers me.
Images may be found: https://imgur.com/a/dhLtSCa
It is particularly noticeable when it is showing up at the bottom of a section, as in the second image
The image is white, however the settings I have selected are that it is to repeat along the X axis, and then in the size and position area, I did indicate the width of the graphic, though the problem persists regardless of size.
Would you be able to advise on how to resolve this situation?
Thank you!

[ruenel]

Hello Meredith,

Thanks for writing in!

Did you added the image as a background of a section? To avoid the gaps, please make sure that the sections does not have any top and bottom margins at all. You can check this out in the section settings as shown below.

And if you are using a classic section element, you should also see a margin field option as you scroll down the section settings.

Hope this helps.

[Sharktoes]

I had zoomed in and looked at my graphics previously, and they were good to go. But just now I max zoomed in and there is a slight alpha change on the side margins, so this is likely the problem.
I will update the ticket again if this does not resolve the issue!

Thank you so much for you help!

[Sharktoes]

For anyone else having this issue, whenever I am exporting my images to a smaller size, the alpha just doesn’t remain true at the edges. Since SVG is not supported, I ended up opening up all the smaller res images in Photoshop and cropping off the pixels, or painting over.

There is one issue I am still running in to and that is the line at the bottom of the section. How do I go about removing this?

[rad]

Hi Meredith,

It’s only doable with CSS, please add this CSS to your Theme Options CSS.

.x-colophon {
    border-top: 0px !important;
}

Then this CSS to make sure there is no line in between your background image and background color

[class^="x-bg"] {
    height: calc(100% + 1px) !important;
}

Thanks!

[Sharktoes]

Thank you so much, that worked like a charm!

[jade]

You’re most welcome.