How to Set Background Image for a UIView – XCode iOS

There are two ways to set a background image to a UIView

  1. You can set your view background color to color created with UIColor’s colorWithPaternImage.
  2. You can add a UIImageView subview to your view.

colorWithPaternImage was created to use small images to create a pattern image that will be repeated. Using it with large images wont be a wise decision. So if you want to have a patterned image background with uses small images which will be repeated to fill the background, then you should use colorWithPaternImage, as it will do it quickly and wont consume much memory.

1
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"background"]];

If you have a full size background image, then you should definitely use the UIImageView. Using UIImageView will save a lot of memory in this case.

1
2
UIImageView *backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background"]];
[self.view addSubview:backgroundView];

via RayWenderlich

How to Add Background Image to UIKit Controls

To bring appearance changes to UIKIT controls, you can use the Apple Appearance API, which was introduced with iOS5. Using Appearance API, you can set the tint color, background image, and title position properties (among other) on a wide variety of objects, including toolbars, navigation bars, search bars, buttons, sliders, and some other controls.

For example, to add a background image to Navigation Bar, you can use the following code –

1
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bar"] forBarMetrics:UIBarMetricsDefault];

Have a look at this link to get more info on Appearance API.

Namit Gupta

iOS Developer @GetVokal. Passionate about Mobile Apps. Loves to Design. You can reach him on his social profiles below.

Comments 18

  1. How can I get the image to automatically scale to the right size for the device it’s on?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    - (void)viewDidLoad

    {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        UIImageView *backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Background@2x.png"]];
    [self.view addSubview:backgroundView];
       
    }
    1. Hi Robert,

      If you are talking about the normal and @2x retina image, operating system automatically use the appropriate image according to the screen type. You just have to use the normal version of the image while coding. @2x will be automatically picked when your app will run on a retina device.

      And if you are talking about the scaling of image on a 3.5 inch and 4 inch screen, then you have to use two version of your image. Otherwise the image will look stretched. You would have to check for the screen heigh and put appropriate image accordingly. It can be done as follows:

      1
      2
      3
      4
      5
      6
      if(self.view.frame.size.heigh==480){
      //put your image code here for 3.5 inch screen
      }
      else if(self.view.frame.size.height==568){
      //put your image code here for 4-inch screen
      }
      1. Hi Namit,
        Thanks. That’s just the info I need.
        I’m still supporting iPhone 4 and iPad, and iPod … So I needed to be able to scale for them. Looks like multiple images after all.

      2. Hello Namit,
        I hope you are still around.
        I have become “lost” in the tutorials and documents. I hope you can give me a pointer to lead the way. I’m using XCode 5.2 on Mavericks.

        I have a simple project that runs on iPhone, and iPad, – iOS7.
        The devices can rotate into landscape, and back into portrait mode.
        The actual app runs fine. But I am now getting lost in the use of images on this version.
        1. Do I need different background images for each phone/ipad and for each rotation, ie;
        640×920 Portrait
        920×640 Landscape
        640×1096 Portrait (ip5)
        1096×640 Landscape (ip5)

        and so on – and how does the program know which image it will need?

        I hope you can point me in the right direction with some information, or to a good tutorial that you may know of. The more I work on this, the more I am getting it wrong :-)

        Thanks if you can help
        Robert

        1. Hi Robert, sorry for the late reply. You just need two version of images technically, one normal and one double the size for retina (@2x). You can include different sizes of images according to your needs. And integrate those images in your code manually. iOS only picks the retina image automatically when it runs on retina device. But each image need to have the two versions I talked above if you want to support retina.

          I hope this solves your problem. Let me know if you have more queries.

          Cheers.

          1. Hi Namit,

            I am creating app for iPhone 4 – 5S- 6 and 6 plus.
            So what will be the image size for each, as in 5S screen size is 320×568 and its needed pixel 620×1136. So confuse about image dimension and image view size in Xcode .
            Please reply what will be the image size and UIImageView size ?
            And as we need to keep different image size for each image, So for background image we need to check programmatically for the device?
            like below code :

            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
             if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
                    if ([[UIScreen mainScreen] scale] == 2.0) {
                       
                        if([UIScreen mainScreen].bounds.size.height == 667){
                            // iPhone retina-4.7 inch(iPhone 6)
                           
                            img_loginbg.image = [UIImage imageNamed:@"loginbg-667@2x.png"];
                           
                           
                        }
                        else if([UIScreen mainScreen].bounds.size.height == 568){
                            // iPhone retina-4 inch(iPhone 5 or 5s)
                           
                            img_loginbg.image = [UIImage imageNamed:@"loginbg-568@2x.png"]
            }

            reply with suggestions.

          2. Hi Bhavana,

            Make the ImageView and Image of the resolution of your storyboard or xib file. Create two more copies of the same image with double the size @2x and triple the size @3x (for iPhone 6 plus). Add all the three copies to the project. Xcode will automatically pick the correct image according to the device. You don’t need to do any check programmatically.

            Regards.

          3. Thanks Namit for quick reply.

            Still not satisfied , Suppose My view is for 4 inch having imageview size 320×568 then it will take image with size

            imagebg@2x.png

            i.e 640×1136 resolution?

          4. You’re welcome.

            You got it right. While designing the view you put the normal size image i.e. 320×568. But when the app will run it will pickup the required size @2x or @3x image automatically.

  2. Hi Namit,

    I need your help in setting the background image for my first iOS application (iPhone & iPad). Everything worked perfectly in iOS6, but the alignment has changed in iOS7(iPad). The background image gets hidden behind the Navigation Bar.

    Quick Response highly appreciated.

    1. Hi Vijay,

      You need to move the ImageView slightly down to adjust it with the navigation bar. You can add a NavigationItem from the Object Library to your Storyboard, to get an idea.

      Cheers.

  3. hello. i want to change background colour of my apps. is it possible to change the colour using colour code (like #4fa2c2) in xcode program. if there is any way to set please reply me. thanks

  4. ok. Thanks Namit. :)
    One more last question.
    If I have various objects on screen for example login screens textview then how we can manage all objects according to screen size?

Leave a Reply