how to put background image for navigation bar?

I want to put background image for navigation bar. I tried the following code but it hides the title for navigation.

self.title = @"My title";
UINavigationBar *navBar = self.navigationController.navigationBar;
UIIma开发者_StackOverflow社区geView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"top.png"]];
[navBar addSubview:image];
[navBar sendSubviewToBack:image];

Any buddy know why is it so?

This should go where your navigation controller is initialized, i.e. MainViewController.m

// Set the background image of the navigation bar
UIImage *image = [UIImage imageNamed:@"banner-with-logo.png"];
[self.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"background.png"] forBarMetrics:UIBarMetricsDefault];

You can done by override the drawRect method

@implementation UINavigationBar (TENavigationBar)

- (void) drawRect:(CGRect)rect
{
    UIImage *image = [UIImage imageNamed:@"navigation_background"];

    [image drawInRect:CGRectMake(0, 
                                 0, 
                                 self.frame.size.width, 
                                 self.frame.size.height)];
}

@end

Solution by WaiLam will work but if you are playing movies in your app the player navigation bar will also get change. Here is a better approach -

@implementation UINavigationBar (UINavigationBarCategory)

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx 
{
    if([self isMemberOfClass:[UINavigationBar class]])
    {
        UIImage *image;
        image=[UIImage imageNamed:@"hor_bar"];
        CGContextClip(ctx);
        CGContextTranslateCTM(ctx, 0, image.size.height);
        CGContextScaleCTM(ctx, 1.0, -1.0);
        CGContextDrawImage(ctx,
                           CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage); 
    }
    else 
    {        
        [super drawLayer:layer inContext:ctx];     
    }
}  
@end

This will add an image, with the correct sizing, to the NavigationBar, centered.

/*  custom navbar logo, centered with same height as navbar  */
UIImageView *logo = [[UIImageView alloc] initWithFrame:
        CGRectMake(self.navigationController.navigationBar.frame.size.width/2-75,0,150,
                   self.navigationController.navigationBar.frame.size.height-1)];
[logo setImage:[UIImage imageNamed:@"text_logo.png"]];
[self.navigationController.navigationBar addSubview:logo];
[self.navigationController.navigationBar sendSubviewToBack:logo];

If you want to add the image so that it is always the same throughout the application than use this:

- (void)drawRect:(CGRect)rect {
    // Drawing code 
    UIImage *img = [UIImage imageNamed: @"background-image.png"];
    [img drawInRect:CGRectMake(0, 
                               0, 
                               self.frame.size.width, 
                               self.frame.size.height)];
}

otherwise if you want to set the image at a particular screen only than it is bit tricky like:

- (void) viewWillAppear{
  ...
  ...
  [self addNavigationBarImage:YES];
}

- (void) viewWillDisappear{
  ...
  ...
  [self addTheNavigationBarImage:NO];
}

- (void) addTheNavigationBarImage:(BOOL)add{
  UIImageView *imgView = (UIImageView *)[[self.navigationController navigationBar] viewWithTag:TAG];
  if(add){
    if(imgView == nil){
      imgView = [[[UIImageView alloc] initWithImage:IMAGE] autorelease];
      [self.navigationController.navigationBar insertSubview:imgView atIndex:0];
    }
    //EDIT:
    else{
      [self.navigationController.navigationBar sendSubviewToBack:imgView];
    }

  }
  else{
   if(imgView)
      [imgView removeFromSuperview];
  }
}

Hope this helps.