Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Repeat image horizontally and vertically

Tags:

I want to repeat the following image:

enter image description here

to achieve the following background:

enter image description here

I tried a few codes as follow:

bluePatternView.backgroundColor = [UIColor colorWithPatternImage:
    [[UIImage imageNamed:@"blue_pattern.png"] stretchableImageWithLeftCapWidth:0 topCapHeight:0]];

and:

bluePatternView.backgroundColor = 
    [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"blue_pattern.png"]];

I also tried to draw image with CGContextDrawTiledImage with no success.

How that can be done?!

EDIT: result of implementing luk2302. please give him recognition by upvoting

bluePatternView.backgroundColor = 
  [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_pattern.png"]];

result:

enter image description here

like image 620
hasan Avatar asked May 02 '15 11:05

hasan


People also ask

What property repeats an image both horizontally and vertically?

Background-repeat: This property is used to repeat the background image both horizontally and vertically.

How do I repeat a picture horizontally?

You can repeat your image horizontally by using background-repeat:repeat-x . This text is displayed in front of the repeating image. That's because it's a background image, as opposed to a normal image that has been defined using normal image code.


1 Answers

I found solution in images.xcassets,

Step 1:- Put your image to images.xcassets

Step 2:- Click on image, then click on bottom right corner written “Show Slicing” Put image

Step 3:- Click on Start Slicing
start slicing

Step 4:- Click on "Slice Horizontally and Vertically" button
Slice horizontally and vertically

Step 5:- Here you will see 3-Horizontal and 3-Vertical slice lines.
enter image description here

  • Put the most left vertical line to left side of image and both right most lines to right side of image.
  • Put the most top line to top of image and both bottom most lines to bottom of image.
  • So the final result will be looking like this.

enter image description here

Step 6:- Use this image.

And now image will be repeated.

enter image description here

Note:- If you give slicing to 2x image it will repeat just 2x image, for 3x images you need to do the same slicing.

Example by Apple

like image 126
Mohammad Zaid Pathan Avatar answered Sep 30 '22 06:09

Mohammad Zaid Pathan