I downloaded some beautiful patterns and filled them as patterns in images. However, every image I prepared with the patterns loses its aspect ratio when it is used as background on different screen sizes. An example is below

Original image (256 x 256) I prepared:

enter image description here

The pattern as it appears on a screen:

enter image description here

The pattern as it appears on another screen:

enter image description here

Can someone suggest on how to make it perfect so that the pattern is not stretched?


1 Answer 1


You won't be able to make a "one size fits all" image, which looks to be what you've attempted. You need to either create an image for the exact dimensions that you need, or tile the pattern.

An important thing to note is that you don't need to create such a big image for this to work for an application; just the smallest necessary pattern will work. In your case, it would be the PNG tile included with the pattern files:

small tile

You won't always have this PNG conveniently available, but you can create your own. Check out this question for how to do that: Exporting a Pattern to Image in Photoshop

This tile will repeat seamlessly to create the perfect "pattern" you are aiming for. The actual implementation of this in your application would be off topic for this site, but I can point you in the general direction:

Your Answer

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

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