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.

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

*NICE* tip WillR!

Thank You for that.
Patrick

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Thankyou WillR for this tutorial.

Cheers
Ian

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Great tutorial Will
How do you inser an image in the backround so we could see the image throuh the menu?

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Thanks, Will, for this tip.
As usual, you are on top of things :)

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Lior,

Just pm'ed you. Let me know how you get on.

Regards,

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Others might have this question so I will answer it publically.

Your "content" div should have a background image value instead of a background color as in wills example.


#content { background-image:url('background.png')}


Then with your menu over the top of this, with transparency, you will see the image underneath.

Obviously you will need to ensure your image will fit nicely in that content div including allowances for stretching to the "landscape" view.

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Thank you Will for the tip. Bought your WSO "My mobile business" and I still owe you a review. Reason being late?!? I am trying to figure out how to add an image in the background. I don't want just a "boring" simple version, because this one is ready yet. Want more WOW...How can I do that? Your advice will be very much appreciated :)

Thank you
Daniela

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Got it, Thanks Kyle:)

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Hey Kyle

Have the same question as LiorN (How do you insert an image in the background so we could see the image through the menu?). Could you help me, please?

Daniela

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Daniela,

If you want an image background to the menu alone go with JToneyUK's suggestion above.

If you want an image background to the menu and click to call button then you place the image in a different location.

Assuming you're using one of Will's templates -

Down about line 84/85 in the style.css is the style for #wrapper

The wrapper is an identifier for a div which includes the click to call button and the menu.

Let's say you want to display the picture my_pic.jpg behind the menu, change the #wrapper to

#wrapper { background:url(../images/my_pic.jpg) top center repeat; width:92%; float:left; padding:0px 4% 20px 4%}

That should do it.

I'm not totally certain about the best dimensions for the picture. It's height will depend on the size of your menu. The repeat means it will fill the whole space in anycase it's just sometimes a repeating image looks strange.

The image can be .jpg .png or .gif The size in kb is the biggest issue. Try to keep it as small as possible.

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Thank you Kyle...will try it. And yes, I am using Will's templates...

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Is there an optimum width for a background image?

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

well, the page itself is set for 320*600 (or 640)
but you have to playusing gifbot to see what's working for you

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

#content and #wrapper does not apply to all mobile themes (like Quentin's - but I'm sure he is trying to figure this out too).

My eyes are peeled for a solution.

It's a really cool feature to have transparency and think it will make for more sales down the road cause it looks so elegant for a visitor.

WillR, have you tried adding a background image with transparency to one of your sites? If so, may we see how it turned out?

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Thanks Will

I'll be applying this to my sites!


Daniel

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Great tip Thanks

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

This is a great tip! I think a lot of mobile site developers leave this out (along with background images) in preference for more speed but their is a balance that must be struck between performance and asthetics to improve the overall UX. As long as we use low res background images or repeating textures we should be able to satisfy all three goals.

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Yes, they are just what I have called those sections on my page but the same works on any other website. You just add the code to the section you are wanting to change.

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Thanks for that great tip, i will try this out at once

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Really true analysis. Thanks to thread opener too. ;)

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Tips were really nice to enhance the quality of transparency of mobile site.

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

You learn something new every day. Thanks Will for the tip.

As always, when Will speaks, I listen.

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Great info. Thanx Will.

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

I saved this link some time ago and now that I want to use this tactic, I can't get it to work.
This is what I have in css:

#content { width:99.8%; float:left; position:relative}

not this #content { background:#EEEDED}

When I change it to:

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

the whole site displays funny.

Why is it that I don't see what Will states in my css? i.e.

#content { background:#EEEDED}

I'm thinking that I may be placing the code in the wrong place but can't seem to find another div for content, but the one that is under 03. wrapper and content.

Hope some of you who are more experienced can help me with this.
Thanks!

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

Tammy,

Contact me via email and I'll help you out.

Re: Adding Transparency to Your Mobile Websites [Tutorial]
 

I am able to get the transparency, but that seems to have the effect of just choosing a lighter colour in the first place.

I was hoping it would be possible to have a background pic such that if you navigate away, it would still be in the background.

I tried JToney's suggestion, but I'm not sure if you're supposed to replace the #content { background:#EEEDED} with #content { background-image:url('background.png')}.
I tried that, and it just ignores the colour aspect and goes to default white (for the menu), without having a background pic.