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

Improve this question
3
  • 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, 2016 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, 2016 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, 2016 at 17:08

1 Answer 1

Reset to default
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
1
  • 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, 2016 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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