Follow @endyourif rss Facebook LinkedIn

Transparent UIWebView Transparent UIWebView

Published on Apr 2, 2009

The other day I was working on my iPhone application. In the application I have a view. This view createsa UIWebView. I then proceed to load content from a webpage into the web view.

This works great. I was then tasked with adding a bit of style to the view.

I started by creating all of the style in the webpage, but I quickly realized that this was causing the load to be a lot slower. Instead I had to integrate the design into the view and simply display the content from the webpage in the design.

This was going pretty well until the webpage sat like a big white blob on top of my nice image. I couldn't let this be and had to find a solution, luckily it wasn't to complicated.

To accomplish this, we need to do 2 things. One, we need to update our UIWebView as follows (this code assumes you've already created a UIWebView called "webView"):
webView.opaque = NO;
webView.backgroundColor = [UIColor clearColor];

At first, I simply thought I could stop here based on my understanding of how background colors worked. However, it was still showing up as white because my webpage itself had, by default, a white background as well.

In your HTML page that you, you need to apply the following style:
background-color: transparent;

This can be applied directly to the <body> tag or if you have a CSS file or inline CSS to the body {} element.

Now, if you compile your application, the webpage should get loaded without a white background.

Tags: iPhone | UIWebView | transparent | clearColor

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP