Transparent UIWebView

The other day I was working on my iPhone application. In the application I have a view. This view creates a 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 similar to how you perform a transparent background with CSS.

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: