Using an HTML Web View with a Transparent Background in iPhone SDK's Interface Builder and Xcode

Something almost every iPhone application needs is an About and Help view that allows the user to learn a little bit about the application they’re using and  how it should be operated.  The problem with a UITextView in Apple’s XCode and Interface Builder SDK is that you can not use rich-text styling or even bold one line over another.

One solution to this problem would be to create image files containing stylized text and then rasterize them and allow the user to page through them.  The problem with this is that you can’t have tappable URLs or links embedded in the text.

David Peixotto, coding ninja and my business partner for Neutrinos, suggested we look at using a Webview or HTML view and put an imageview in the background.  The trick is telling the iPhone to display a UIWebView with a transparent background.  I looked around for the solution to this and came across this helpful post in the iPhone Developer SDK forums.

Step one of getting a transparent web view in interface builder is to create HTML in the controller.m for the view containing the webview that contains the CSS line: <body style=”background-color:transparent”> Inside the <head> </head> sections of the html.

Step two is to set the background color of the webview to clear or transparent:  myWebView.backgroundColor = [UIColor clearColor];

Step three is to make sure that the “Opaque” box on the inspector of properties of the WebView is unchecked.

That should be all you need to do.  Drop a UIImageView behind the newly transparented web view object and you should be able to use a scrollable rich text with hyperlinks.  Horray.

If this helped you or confused you more, please post in the comments!  We do have it working on 3.0 much to the happiness of our client.

3 thoughts on “Using an HTML Web View with a Transparent Background in iPhone SDK's Interface Builder and Xcode”

  1. I have done exactly same which you have mentioned, but instead of getting transparent webview, Gray color is appearing on my webview.

    Please advice.

Leave a Reply

Your email address will not be published. Required fields are marked *