1

My designer has sent me a background image for a website we're working on that is just diagonal lines, but the image is very large and I would like to make it as small as possible and then set it as a repeatable background to make it cover the entire element.

Is there an easy way to generate the smallest possible background image from a large pattern? I've been trying to just guess but I can't get the pattern to line up perfectly.

Here's the image:

Pattern

  • You could SVG for something like this (a collection/tool like SVGeneration may be useful) or use this exact image just cut to be smaller and using CSS's repeating background image – Zach Saucier Jan 28 '16 at 16:57
  • "just cut to be smaller" that's what I'm trying to do, the problem I'm trying to resolve is cutting it at a point where it repeats perfectly, just wondering if there is an easy or mathematical way to do this instead of just guessing and checking(which has not been working for me). – APAD1 Jan 28 '16 at 17:02
  • To have a mathematical way of doing it, you'd need to know how far apart the lines are, how wide they are and where the lines start (coordinates) – Zach Saucier Jan 28 '16 at 17:08
1

Found an article which helped me think through how to do it. In case anyone else has this question, the "Create repeating patterns" section of this article is what helped me figure it out.

Zoom in and pick a focal point on the design, in this case it’s a point in the design where the pink line changes to yellow. Drag out a marquee until you reach the same point elsewhere on the design.

| improve this answer | |
  • That is basically what you need to do—pick a point and move your selection horizontally till you reach the same point, then do the same thing vertically and you have your smallest possible repeating section. – Cai Mar 28 '16 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.