iOS UIView Background Image

Question

I want to have a UIImageas a background image on a UIView.

Here is my code:

UIColor *background = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"login.png"]];
self.view.backgroundColor = background;
[background release];

The Problem is, that the scale is not okay. It scaled 640 to 480, so I can't tell it 100% sure but it looks like only 300 to 250 is displayed or something like that.

Is there a fit to scale / fit to UIView / fit to size modus?

What is the size of the original PNG? Also are you viewing this on a retina device? — Lee Armstrong, Apr 03 '12 at 13:36

score 54 · Answer 1 · answered Sep 28 '12 at 08:20

54

you are required to process your image before you add it, 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];

answered Sep 28 '12 at 08:20

uneakharsh

740
6
7

In case you got the image flipped, you have to change the context orientation with CGContextTranslateCTM() – geezmo Jan 12 '16 at 18:37

score 29 · Answer 2 · answered Apr 03 '12 at 13:44

29

hello try this,

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

answered Apr 03 '12 at 13:44

Dipak Chaudhari

655
4
8

1

best answer, clear and works instantly. Perfect for a fast research. – Heckscheibe Jul 09 '13 at 12:31

score 12 · Answer 3 · answered Aug 02 '12 at 14:58

Specify an actual background and send it to the back of your view

//add background
UIImageView *background = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bg.png"]];
[myView addSubview:background];
[myView sendSubviewToBack:background];
myView.contentMode = UIViewContentModeScaleAspectFit;

Mohammad Zaid Pathan · Answer 4 · 2015-03-16T10:11:24.610

10

In Swift use this...

    UIGraphicsBeginImageContext(self.view.frame.size)
    UIImage(named: "1.png")?.drawInRect(self.view.bounds)

    var image: UIImage = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    self.view.backgroundColor = UIColor(patternImage: image)

edited Mar 16 '15 at 10:11

answered Oct 11 '14 at 07:24

Mohammad Zaid Pathan

16,304
7
99
130

score 9 · Answer 5 · answered Jul 23 '14 at 08:37

9

And if you want to do it in swift:

self.view.backgroundColor = UIColor(patternImage: UIImage(named:"background.jpg"))

answered Jul 23 '14 at 08:37

Kevin Delord

2,498
24
22

1

and yes, I want to do it in Swift :D – Thai Tran Mar 20 '15 at 00:04

score 9 · Accepted Answer · edited May 23 '17 at 12:33

According to the UIColor API:

You can use pattern colors to set the fill or stroke color just as you would a solid color. During drawing, the image in the pattern color is tiled as necessary to cover the given area.

That means it tries to create a pattern out of your image to fill the area. I think the optimal way to do it is so rescale your image to fit exactly the UIView size.

There is a nice answer here how to resize your image during runtime:

The simplest way to resize an UIImage?

score 2 · Answer 7 · answered Sep 07 '16 at 07:52

I'm using the following extension in Swift:

extension UIView{

    func setBackgroundImage(img: UIImage){

        UIGraphicsBeginImageContext(self.frame.size)
        img.drawInRect(self.bounds)
        let patternImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        self.backgroundColor = UIColor(patternImage: patternImage)
    }
}

In code you can use like this:

if let image = UIImage(named: "HomeBg"){
        self.view.setBackgroundImage(image)
    }

score 1 · Answer 8 · answered Feb 20 '14 at 18:37

1

In the Interface Builder, add an Image View to View and select the image you want to use in Attributes inspector. Finally, make the Image View the very first child of the View by dragging the element in Document Outline.

answered Feb 20 '14 at 18:37

Dino Tw

3,167
4
34
48

score 1 · Answer 9 · answered Mar 03 '14 at 00:53

If the view is going to have the same size, you can place a method in your AppDelegate.m that scales the background image on first run, and then keeps the scaled image in memory for future use:

UIImage *backgroundImage = nil;
- (void)setBackground:(UIView *)view
{
    if (backgroundImage == nil)
    {
        UIGraphicsBeginImageContext(view.frame.size);
        [[UIImage imageNamed:@"Background"] drawInRect:view.bounds];
        backgroundImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    }
    view.backgroundColor = [UIColor colorWithPatternImage:backgroundImage];
}

Thanks to @uneakharsh for his help!

score 1 · Answer 10 · answered Jul 10 '17 at 14:05

I also wanted to do this and I found that, due to autolayout, the UIImageView stretches the containing UIView, when I want it the other way: I want the UIImageView to take the size of the UIView.

So I created this class. It updates the UIImageView frame according to the UIView container whenever it is laid out via layoutSubviews.

/**
 * View with an image whose frame is adjusted to the frame of the view. 
 */
class ViewWithImage: UIView {

    let image: UIImageView

    init(image: UIImageView) {
        self.image = image
        super.init(frame: .zero)
        self.addSubview(image)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updateImageFrame()
    }

    private func updateImageFrame() {
        image.frame = CGRect(origin: .zero, size: self.frame.size)
    }

    required init?(coder: NSCoder) { fatalError("no init(coder:)") }
}

score 0 · Answer 11 · edited Dec 27 '13 at 07:42

0

UIColor *background = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"image.png"]];
self.view.backgroundColor = background;
[background release];

edited Dec 27 '13 at 07:42

Aziz Shaikh

16,245
11
62
79

answered Dec 27 '13 at 07:24

Manu P

1

score 0 · Answer 12 · answered Oct 06 '14 at 07:17

You can use UIGraphicsBeginImageContext method to set the size of image same that of view.

Syntax : void UIGraphicsBeginImageContext(CGSize size);

  #define IMAGE(imageName) (UIImage *)[UIImage imageWithContentsOfFile:
[[NSBundle mainBundle] pathForResource:imageName ofType:IMAGE_TYPE_PNG]]

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

    self.view.backgroundColor = [UIColor colorWithPatternImage:IMAGE(@"mainBg")];

score -1 · Answer 13 · edited Aug 08 '14 at 05:56

-1

this.View.BackgroundColor = UIColor.FromPatternImage (UIImage.FromFile ("body_background.png"));

edited Aug 08 '14 at 05:56

Baby Groot

4,637
39
52
71

answered Aug 08 '14 at 05:55

user3098847

309
3
2

iOS UIView Background Image

13 Answers13