Sign in to follow this  
Lynn King

Border Blending for repeating

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this