iPhone – Set Background Image for UIView

In iPhone SDK, there is no setBackgroundImage function for setting an background image of an UIView. But actually, this can be done by the setBackgroundColor function. The following code will set the background view to Red.

self.view.backgroundColor = [UIColor redColor];

 

So if you want to set a picture as an background image of a view, just initialize an UIColor instance with an image and set it to the view.

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

 

Please note that you have to set all the items which are in front of the background view to clearColor such that they will not cover the background image.

Done =)

Reference: Use image for background for UIView

About these ads

34 thoughts on “iPhone – Set Background Image for UIView

    1. ykyuen Post author

      Is the following work?

      self.view.backgroundColor = [UIColor redColor];
      

      If yes, then i think there should be some problem when initializing a UIColor instance with image. Check if the image is loaded without problem.

      Reply
  1. Giordano

    This worked great for me, just one issue…the image being displayed on my iPhone’s screen is coming out lighter/duller looking than the original png. Any thoughts on what the cause of this might be?

    Reply
  2. Prasad

    Yes. You are right to set background image. But i have some doubt in it. When we apply pinch gestureRecognizer on view , the background image is also increasing with view but here only increase the view and not on background image. Is it possible ? if yes then please replay to me how to solve it.

    Reply
  3. Vanja

    Hello!
    I`d like to ask, is there any method to scale background image to UIView size. I`ve done like here, but my image is too big for view. Do U know such ? :) Thanks.

    Reply
  4. Wang

    Hello, your method is very good. Thanks a lot.

    But I have a problem now.
    My image is large than my iphone simulator screen,I can’t see the whole image.
    How can I do?

    Reply
      1. Wang

        Yes, it works. Thank you.
        But I find another method.
        How do you think?

        UIImage *bg = [UIImage imageNamed:@"image.png"];
        UIImageView *menu_bg = [[UIImageView alloc] initWithImage:bg];
            
        CGSize screenSize = [UIScreen mainScreen].bounds.size;    
               
        menu_bg.frame = CGRectMake(0, 0,screenSize.width ,screenSize.height );
        [self.view addSubview:menu_bg];
        
      2. ykyuen Post author

        I am not very familiar with iOS development so i couldn’t comment on which one is better. Your approach should have no problem i think,

        Anyway, thanks for providing your solution here. =)

  5. sakthivv

    can that image be stretchable image ? i used this property to stretch image “stretchableImageWithLeftCapWidth” but its not working .. how do set a stretchable image as background ?

    Reply
  6. Brett Lee

    i want to place an background image of my view, which is already a designed view…
    for example i develop my login screen with fields email,pwd,confirm pwd,submit button..
    how can i add an image as my view’s background…????
    pls answer me

    Reply
  7. powertux

    Hello, all. I have some strange issue:

    // if return color by this method, work in non retina but in retina position of color issue...
    if (!_backgroundPortrait) _backgroundPortrait = [UIColor colorWithPatternImage:[UIImage imageNamed:@"background-portrait.jpg"]];
    return _backgroundPortrait;
    
    //if return color by this methods, didn't work at all... (return clear color)
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(660, 976), NO, [UIScreen mainScreen].scale);
    [[UIImage imageNamed:@"background-portrait.png"] drawInRect:CGRectMake(0, 0, 660, 976)];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    _backgroundPortrait = [UIColor colorWithPatternImage:image];
    
    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s