Border Blending for repeating

[Lynn King]

So I made a custom background/image and now I'm trying to implement it into an HTML website I'm making. I've tried some HTML code to stop repeating the image throughout the site, but that just leaves 1 small image and the rest of the site white. So now I'm trying to blend the edges where it'll look normal throughout the site and not have this obvious border: http://prntscr.com/pgoggt

I currently have no idea of how to go at this problem, any suggestions or help to properly blend the edges to give it a border that doesn't stick out?

[Elvis Hbpbgrtnk]

Maybe problem more simple than this: Make image whole page. No borders. Problem solved!

[Ego Eram Reputo]

Your problem is that the left hand edge of the image does not match the right hand side. This reveals itself as a noticeable edge as you have found.

 

You have a couple of options:

1. recreate the texture so it tiles seamlessly.
2. Use CSS to make a single instance of the image stretch across the entire screen.

 

How to - First option

First have a read of this post: https://forums.getpaint.net/topic/2244-seamless-texture-helper-plugin/   BoltBait does a really nice job of explaining what you're trying to achieve.

 

Download and install this plugin: https://forums.getpaint.net/topic/4591-seamless-texture-maker-ymd100718/

 

Apply it to your texture to make it tile seamlessly.

 

 

How to - Second option

Go here & read the section on making a "Hero image" (its the last example on the page): https://www.w3schools.com/cssref/css3_pr_background-size.asp

[Lynn King]

7 hours ago, Ego Eram Reputo said:

How to - Second option

 

Go here & read the section on making a "Hero image" (its the last example on the page): https://www.w3schools.com/cssref/css3_pr_background-size.asp

I was looking for something like this, just couldn't find it so I figured I had to blend the edges to do it. Thanks!