UITableView background Image

Question

I'am trying to setup a png image as my tableview's background. With the following code all are fine! But only on iPhone Simulator. If I try to run the application on an iPhone device the background of tableview remains white (or clear). Do you thing thing that is something about the way I tried to set the background color. I have been trying many ways until the following, but all have the same issue.

self.tableView.backgroundColor = [UIColor clearColor];
self.tableView.opaque = NO;
self.tableView.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"TableViewBackground.png"]];

Thank you in advance!

Samoyedic

This sounds like the image is not copied to your device. What does [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"TableViewBackground.png"]]; return on the device? Dump it to the console, please. – Calliope

I think Nick is right, you can dump it using debugger while breakpointing by typing : po [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"TableViewBackground.png"]] ;) clean/rebuild might help. – Kennie

Or just NSLog(@"imageView: %@", [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"TableViewBackground.png"]]); – Calliope

This is the NSLog output : 2011-04-29 01:13:42.653 TestProject[573:707] imageView: <UIImageView: 0x14aac0; frame = (0 0; 0 0); userInteractionEnabled = NO; layer = <CALayer: 0x151a40>> and this is from simulator 2011-04-29 01:15:21.431 TestProject[3893:207] imageView: <UIImageView: 0x5923cc0; frame = (0 0; 320 480); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x4e3ec00>> It seems to have issue with image (frame = 0,0,0,0???) I use this image also for launch image! – Samoyedic

Answer 1

Please use following code.

UIImageView *tempImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"TableViewBackground.png"]];
[tempImageView setFrame:self.tableView.frame]; 

self.tableView.backgroundView = tempImageView;
[tempImageView release];

Thanks,

Baseless

This had been annoying me for ages. Thanks so much! :) – Otalgia

this is better than change backgroundColor as it won't repeat the background when the table is scrolled or bouncing. – Beltran

Setting the imageview to the frame is actually bad, since you are taking the origin of the table view, which could potentially be nonzero, while the image view should probably be zero origin always – Pablopabon

Use bounds instead [tempImageView setFrame:self.tableView.bounds]; – Imprisonment

i see my background for a moment, but then background is replaced by cell's content. What should i do ? – Chuffy

Answer 2

I think this approach cleaner:

UIColor *background = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"TableBackground.jpg"]];
self.tableView.backgroundColor = background;
[background release];

Strontian

do you know how to make it fixed in its position so that it wont scroll with the table? and also make the image start "X" pixels from the top? – Kirkendall

this would cause performance issues on uitableview and scrollview – Bentlee

Using this solution on retina devices causes images to stretch. Just something to watch out for. – Ensepulcher

Answer 3

Simple swift version will be

let tempImageView = UIImageView(image: UIImage(named: "yourImage"))
tempImageView.frame = self.tableView.frame
self.tableView.backgroundView = tempImageView;

Disputable

Is this working on static tableviews or only working on dynamic cells ? As I've tries to use it on static but it doesn't work – Pistoleer

Answer 4

Is your image actually named TableViewBackground.PNG (note the capitals)? You need to have the case match exactly on an iOS device, whereas it doesn't need to match exactly in the Simulator.

Rabah

Answer 5

 UIImageView *tempImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"TableViewBackground.png"]];
[tempImageView setFrame:self.tableView.frame]; 

self.tableView.backgroundView = tempImageView;
 [tempImageView release];

This works perfect. Thanks to Ravin by Jona

Churchy

Answer 6

An IBDesignable tableview subclass that will let you attach an image from interface builder

import UIKit

@IBDesignable
class DesignableTableView: UITableView {

    @IBInspectable var backgroundImage: UIImage? {
        didSet {
            if let image = backgroundImage {
                let backgroundImage = UIImageView(image: image)
                backgroundImage.contentMode = UIViewContentMode.ScaleToFill 
                backgroundImage.clipsToBounds = false
                self.backgroundView = backgroundImage
            }
        }
    }

}

Cowey

Answer 7

[TableView setBackgroundView:nil];
[TableView setBackgroundView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"apple.png"]] ];

Longe

Answer 8

This works perfectly fine, also if you want to use a pattern image for your background.

UIImage *image = [UIImage imageNamed:@"something.png"];
self.tableView.backgroundView = nil;
self.view.backgroundColor = [UIColor colorWithPatternImage:image];

Thermolabile

Answer 9

A little late but maybe for all the others looking for a solution. I could get that work by using the following code in the viewDidLoad method of the UITableViewController:

self.parentViewController.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"background.png"]];
self.tableView.backgroundColor = [UIColor clearColor];

or with using just a background color:

self.parentViewController.view.backgroundColor = [UIColor scrollViewTexturedBackgroundColor];
self.tableView.backgroundColor = [UIColor clearColor];

It took me a while to figure that out but now it works like a charm.

Grimmett

Answer 10

Objective-c version:

cell.backgroundColor = [UIColor clearColor];

Also see this: How to create a UITableViewCell with a transparent background

Nauseating

Answer 11

Thanks @Ravin for your answer.

In Swift 5.0:

    let tempImageView = UIImageView(image: UIImage(named: "justin_bieber_topless.png"))
    tempImageView.frame = self.tableView.frame
    self.tableView.backgroundView = tempImageView;

Upheaval

Answer 12

UIImageView *imageviewTemp = [[UIImageView alloc] init];
[(UIImageView *)imageviewTemp sd_setImageWithURL:[NSURL URLWithString:self.stringOfPassedImage]];
[imageviewTemp setFrame:self.tableView.frame];
self.tableView.backgroundView = imageviewTemp;

Slaton

where are you setting the background image on the table view? you are not answering the question – Ingrain

Nothing in the original question implies that the image must be fetched from network. furthermore sd_setImageWithURL: isn't available through UIKit. – Polytonality