UIWebView background is set to Clear Color, but it is not transparent

Question

I'm developing an iOS 4 application using iOS SDK latest version and XCode 4.2.

I have a XIB with a UIWebView with Alpha = 1.0, Background set to Clear Color and Opaque is not set. On this XIB I setup an image as background with this code:

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        UIColor *background = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"AboutBackground.png"]];
        self.view.backgroundColor = background;
        [background release];
    }
    return self;
}

The UIWebView is showing an static html:

<html><head></head><body style=\"margin:0 auto;text-align:center;background-color: transparent; color:white\">...</body></html>

On iOS 5 simulator, its background is transparent, but on an iOS 4 device is grey.

Any clue?

possible duplicate of [How to make a transparent UIWebVIew](http://stackoverflow.com/questions/3646930/how-to-make-a-transparent-uiwebview) — Vladimir, Jul 31 '12 at 13:44
try to just put an UIImageView on your webview in interface builder and set it your image. — Stas, Dec 29 '11 at 11:17
Thanks for your answer, but the web view doesn't fill the entire screen. — VansFannel, Dec 29 '11 at 11:25

Maulik · Accepted Answer · 2011-12-29T11:39:33.033

366

Also set :

[webView setBackgroundColor:[UIColor clearColor]];
[webView setOpaque:NO];

edited Dec 29 '11 at 11:39

answered Dec 29 '11 at 11:17

Maulik

19,348
14
82
137

3

This only works for me if I set the background color and opaqueness after calling loadHTMLString. It seems like loadHTMLString resets both of those values. – Justin Anderson Sep 30 '12 at 15:05
1

I know the question was for iOS, but if for OSX, this [question and answer](http://stackoverflow.com/a/34525808/105539) resolves the problem and may also help those with iOS too. – Volomike Dec 30 '15 at 20:21
This solution is still working in iOS 12.1, Xcode 10.1 and Swift. – Bhavin_m Apr 10 '19 at 12:36

score 15 · Answer 2 · answered Dec 09 '13 at 12:46

15

     /*for ios please set this*/

     [webViewFirst setOpaque:NO];

     /*for html please set this*/
     <body style="background:none">

answered Dec 09 '13 at 12:46

dheerendra

537
6
8

score 9 · Answer 3 · answered Dec 29 '11 at 11:15

9

Besides setting your webview's background to clear color, also make sure that you set opaque to false.

answered Dec 29 '11 at 11:15

Elegia

325
2
10

Thanks for your answer, but opaque is not set on Interface Builder. – VansFannel Dec 29 '11 at 11:16
Try setting it after calling [super viewDidLoad:animated]; . – Elegia Dec 29 '11 at 11:19
Hi, I have the same issue..works on ios5 but grey background on ios4. How did you solve it? – user542584 Mar 03 '12 at 22:12

score 3 · Answer 4 · edited Nov 12 '14 at 06:03

3

webView.opaque = NO;

webView.backgroundColor = [UIColor clearColor];

edited Nov 12 '14 at 06:03

NeverHopeless

11,077
4
35
56

answered Oct 09 '14 at 10:22

Avinash651

1,399
11
17

score 3 · Answer 5 · edited Jan 04 '16 at 06:43

3

NSString *content=@"example clear background color UIWebview";
NSString *style=[NSString stringwithformat:@"<html><head><style>body {background-color:transparent;}</style></head><body>%@</body></html>",content];
[myWebview loadhtmlstring:style baseurl:nil];

edited Jan 04 '16 at 06:43

Manjunath Ballur

6,287
3
37
48

answered Jan 04 '16 at 06:33

user5742417

31
1

score 3 · Answer 6 · answered Sep 17 '18 at 12:16

3

Latest Swift Version (as required):

lazy var webView: UIWebView = {
    let view = UIWebView()
    view.delegate = self
    view.backgroundColor = .clear
    view.isOpaque = false
    return view
}()

Remove delegate line if not required

answered Sep 17 '18 at 12:16

RichAppz

1,520
2
14
27

Artem Stepanenko · Answer 7 · 2015-04-03T23:29:02.003

3

You can try this code (i know, that it's unsafe, but it works even for ios5):

- (void)makeBodyBackgroundTransparent {
        for (UIView *subview in [webView subviews]) {
            [subview setOpaque:NO];
            [subview setBackgroundColor:[UIColor clearColor]];
        }
        [webView setOpaque:NO];
        [webView setBackgroundColor:[UIColor clearColor]];
}

edited Apr 03 '15 at 23:29

answered Dec 29 '11 at 11:28

Artem Stepanenko

3,423
6
29
51

score 1 · Answer 8 · answered Mar 11 '17 at 22:00

1

For Objective

webView.opaque = NO;
webView.backgroundColor = [UIColor clearColor];

Please make sure to include this into your HTML code:

<body style="background-color: transparent;">

or

 <body style="background:none">

answered Mar 11 '17 at 22:00

Amr Angry

3,711
1
45
37

UIWebView background is set to Clear Color, but it is not transparent

8 Answers8

Linked