Usually this is a simple enough problem, if I want the background to fade to white I’d just grab a 1px wide section of the gradient and repeat it along the x axis, but I’m stuck on how I can do it with the background image I have now.
It has a diagonal pattern so obviously I can’t use that method, it’s made of a 65 x 65px repeated pattern so I tried taking out a 65px wide by 800px high section and repeating that but the lines didn’t match up.
Any ideas on how to do this? I also though of just putting the pattern on with no fading, and then putting a transparent - white gradient over the top but I’m not sure how practical that is. I’ve attached an example of what I’m trying to achieve to give you an idea.
Thank you very much John, it didn’t occur to me that it was achievable with repeated images still - seems obvious now though! Took a bit of fiddling but I ended up wrapping my head around it and got it working
Here we go - this is the closest I could get it to work.
I had to cut your background image from your example.jpg:
If you have the original background image ensure that the diagonal pattern starts and finishes exactly where the diagonal meets the top and left edges of the image and it should align correctly.
