Adding Transparency to Your Mobile Websites [Tutorial]

I have had a number of people ask me how to add transparency to certain parts of their mobile website so that the background of the page can be seen through certain sections such as your homepage menu.

Here is a simple example of how to add transparency to your mobile website.

Let's say you had a section of your mobile website (such as your homepage main menu) that was in front of the background of the page and so you wanted to add some transparency so you could see a little of the background color through that menu.

The css code controlling the color of that menu background might look something like this:

#content { background:#EEEDED}

If we wanted to add transparency to that menu the code would now look something like this (the only code that has been added is in bold):

#content { background:#EEEDED; opacity:.35; filter:alpha(opacity=35);}

Make sure you change the 35 values to anything between 0 and 100 and that both of those values are always the same. The lower the values the more transparent the background will be. In the example below I used a transparency of 35% but it was only to show you how it works. Usually a value of around 60-75% will give best results but feel free to experiment yourself.

For more information visit:
CSS Image Opacity / Transparency