How to fill background image of an UIView

Question

I have an UIView and I set a background image in this way:

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"sfond-appz.png"]];

My problem is that back-image is not centered inside the view, but it's replayed some times to fill all the view. Is there a way to center image inside uiview and scretch to have screen size?

Note: I can't use UIImageView for background cause I have a scrollview.

Solution 1

You need to process the image beforehand, to make a centered and stretched image. Try this:

UIGraphicsBeginImageContext(self.view.frame.size);
[[UIImage imageNamed:@"image.png"] drawInRect:self.view.bounds];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

self.view.backgroundColor = [UIColor colorWithPatternImage:image];

Solution 2

For Swift use this...

UIGraphicsBeginImageContext(self.view.frame.size)
UIImage(named: "ImageName.png")?.draw(in: self.view.bounds)

if let image = UIGraphicsGetImageFromCurrentImageContext(){
    UIGraphicsEndImageContext()
    self.view.backgroundColor = UIColor(patternImage: image)
}else{
    UIGraphicsEndImageContext()
    debugPrint("Image not available")
 }

Solution 3

The colorWithPattern: method is really for generating patterns from images. Thus, the customization you require is most likely not possible, nor is it meant to be.

Indeed you need to use a UIImageView to center and scale an image. The fact that you have a UIScrollView does not prevent this:

Make self.view a generic view, then add both the UIImageView and the UIScrollView as subviews. Make sure all is wired up correctly in Interface Builder, and make the background color of the scroll view transparent.

This is IMHO the simplest and most flexible design for future changes.

Solution 4

Repeat:

UIImage *img = [UIImage imageNamed:@"bg.png"];
view.backgroundColor = [UIColor colorWithPatternImage:img];

Stretched

UIImage *img = [UIImage imageNamed:@"bg.png"];
view.layer.contents = img.CGImage;

Solution 5

Correct way to do in Swift 4, If your frame as screen size is correct then put anywhere otherwise, important to write this in viewDidLayoutSubviews because we can get actual frame in viewDidLayoutSubviews

   override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        UIGraphicsBeginImageContext(view.frame.size)
        UIImage(named: "myImage")?.draw(in: self.view.bounds)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        view.backgroundColor = UIColor.init(patternImage: image!)
    }

View more solutions

Comments

[Sam YC]

This is awesome answer. Most of solutions in stackoverflow point to use UIImageView which is not that good compare to this one.

[tyegah123]

I've tried this approach for my view but the image got messed up on landscape. anyone knows how to fix it?

[Mackie Messer]

Also colorWithPatternImage: seems to retain the image forever, creating a memory leak. It doesn't matter for small checkerboard patterns, but if you use real images, you will run quickly out of memory...

[Chandan Reddy]

use drawAsPatternInRect instead of drawInRect

[Mohammad Zaid Pathan]

thanks for your suggestion,but why should I do that?

[Chandan Reddy]

there was a problem with my xcode. it showed there is no method drawInRect. you are right. Thanks dude. drawAsPatternInRect is not giving the exact efect.

[Chandan Reddy]

how can I show background image in the middle of the screen without stretching it.

[Mohammad Zaid Pathan]

Case 1: If you wants full screen background image then use correct size image for particular screens and pin it to all edges using autolayout. Case 2: If you wants specific length and width of background image then use autolayout with FixedWidth and FixedHeight and make it Horizontally and Vertically centered.

[Chandan Reddy]

can you share some sample code of case 2. I am very new to IOS and swift.

[Mohammad Zaid Pathan]

Download sample code from here. dropbox.com/sh/4mxoi9ogxy7olmp/AACWdOr2Wh3kacdxU4uudm9ha?dl=‌​0

[Michael]

I was seriously about ready to smash my monitor because I could not get a UIImage object to scale appropriately or position correctly no matter what I did. Thank you thank you thank you for this Swift adaptation of code that ACTUALLY WORKS!

[Lauri Lehmijoki]

Thanks, works for me! Remember to change from var image: UIImage = UIGraphicsGetImageFromCurrentImageContext() to let image: UIImage = ... to remove the Swift compiler warning.

[djay]

This solved my problem of reloading new image from document's directory in image view as well otherwise it was not updating. Thanks

[Mohith P]

Hi...can i resize image without using following functions ,UIGraphicsGetImageFromCurrentImageContext() ,UIGraphicsEndImageContext() ,UIGraphicsBeginImageContextWithOptions()

[Georgio Sayegh]

Thank you for your answer. But as a side note, one mustn't forget that for the repeat piece of code one has to process the image and resize it.

[Shivam Pokhriyal]

This works although image is not centered. As it would've have come out if i had used uibutton.setBackgroundImage(image)

[Saad Rehman]

I'm using this code to make a background image for my custom tab bar. It does fill the tab bar horizontally but vertically it leaves spaces. Here's a picture of what's happening. Any idea what's wrong? [imgur.com/qwbCC5J]