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!

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. — Nick Weaver, Apr 28 '11 at 21:52
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. — Vincent Guerci, Apr 28 '11 at 21:55
Or just `NSLog(@"imageView: %@", [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"TableViewBackground.png"]]);` — Nick Weaver, Apr 28 '11 at 22:03
This is the NSLog output : 2011-04-29 01:13:42.653 TestProject[573:707] imageView: > and this is from simulator 2011-04-29 01:15:21.431 TestProject[3893:207] imageView: > It seems to have issue with image (frame = 0,0,0,0???) I use this image also for launch image! — user730153, Apr 28 '11 at 22:14

score 174 · Answer 1 · answered Apr 29 '11 at 04:12

174

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,

answered Apr 29 '11 at 04:12

Ravin

8,544
3
20
19

This had been annoying me for ages. Thanks so much! :) – Lucas Jan 05 '12 at 08:26
this is better than change backgroundColor as it won't repeat the background when the table is scrolled or bouncing. – Shinigamae Nov 13 '12 at 08:13
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 – Mazyod Oct 12 '13 at 01:35
6

Use `bounds` instead `[tempImageView setFrame:self.tableView.bounds];` – ArtFeel Jan 31 '14 at 18:22
1

i see my background for a moment, but then background is replaced by cell's content. What should i do ? – Awais Fayyaz Mar 28 '18 at 14:14

score 17 · Answer 2 · answered Jan 03 '12 at 02:56

17

I think this approach cleaner:

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

answered Jan 03 '12 at 02:56

Nikolay Klimchuk

316
2
8

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? – Airon Zagarella May 03 '12 at 18:49
this would cause performance issues on uitableview and scrollview – Ilker Baltaci Sep 04 '12 at 14:47
2

Using this solution on retina devices causes images to stretch. Just something to watch out for. – Jared Sealey Feb 26 '13 at 02:26

score 14 · Answer 3 · answered Feb 28 '16 at 13:39

14

Simple swift version will be

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

answered Feb 28 '16 at 13:39

Avijit Nagare

8,482
7
39
68

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 – Menaim Nov 09 '20 at 09:41

score 7 · Answer 4 · answered Apr 29 '11 at 04:22

7

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.

answered Apr 29 '11 at 04:22

Nick Forge

21,344
7
55
78

score 5 · Answer 5 · edited Mar 26 '13 at 11:56

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

edited Mar 26 '13 at 11:56

Ram kiran Pachigolla

20,897
15
57
78

answered Mar 26 '13 at 11:38

Jona

51
1
1

score 4 · Answer 6 · answered Aug 25 '15 at 23:05

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
            }
        }
    }

}

score 2 · Answer 7 · edited Oct 28 '14 at 02:15

2

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

edited Oct 28 '14 at 02:15

Teejay

7,210
10
45
76

answered Aug 12 '14 at 12:59

anand madhav

353
4
10

score 1 · Answer 8 · answered Jun 22 '13 at 23:50

1

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];

answered Jun 22 '13 at 23:50

matsr

4,302
3
21
36

score 0 · Answer 9 · answered Aug 12 '13 at 17:50

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.

score 0 · Answer 10 · edited May 23 '17 at 12:34

0

Objective-c version:

cell.backgroundColor = [UIColor clearColor];

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

edited May 23 '17 at 12:34

Community

1
1

answered Dec 21 '16 at 09:32

Leon Wang

1

score 0 · Answer 11 · answered May 20 '20 at 14:24

0

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;

answered May 20 '20 at 14:24

Oz Shabat

1,434
17
16

rajat kumar · Answer 12 · 2016-08-08T05:40:39.550

-3

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

edited Aug 08 '16 at 05:40

answered Aug 04 '16 at 07:23

rajat kumar

1
2

1

where are you setting the background image on the table view? you are not answering the question – ddb Aug 04 '16 at 07:31
Nothing in the original question implies that the image must be fetched from network. furthermore `sd_setImageWithURL:` isn't available through UIKit. – vikingosegundo Aug 30 '17 at 09:43

UITableView background Image

12 Answers12

Linked