Adding Transparency to Your Mobile Websites [Tutorial]

WillR · 22nd Jan 2012, 06:34 AM

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

Pierre! · 22nd Jan 2012, 08:56 AM

*NICE* tip WillR!

Thank You for that.
Patrick

bloggerd · 22nd Jan 2012, 09:36 AM

Thankyou WillR for this tutorial.

Cheers
Ian

LiorN · 28th Jan 2012, 05:45 PM

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

T2007 · 29th Jan 2012, 06:59 PM

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

Young Samurai · 1st Feb 2012, 04:46 AM

Lior,

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

Regards,

Originally Posted by LiorN

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

JToneyUK · 1st Feb 2012, 06:48 AM

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.

Originally Posted by LiorN

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

DanielaG · 1st Feb 2012, 12:36 PM

Originally Posted by WillR

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

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

LiorN · 1st Feb 2012, 01:17 PM

Originally Posted by Young Samurai

Lior,

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

Regards,

Got it, Thanks Kyle

DanielaG · 1st Feb 2012, 03:42 PM

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

Young Samurai · 1st Feb 2012, 04:40 PM

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.

DanielaG · 1st Feb 2012, 04:45 PM

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

Young Samurai · 3rd Feb 2012, 08:11 PM

Is there an optimum width for a background image?

LiorN · 3rd Feb 2012, 08:14 PM

Originally Posted by Young Samurai

Is there an optimum width for a background image?

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

KingMedia · 21st Feb 2012, 01:01 PM

#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?

Daniel Evans · 21st Feb 2012, 10:17 PM

Thanks Will

I'll be applying this to my sites!

Daniel

Jodik · 21st Feb 2012, 10:26 PM

Great tip Thanks

Legacy3 · 21st Feb 2012, 11:44 PM

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.

WillR · 22nd Feb 2012, 07:18 PM

Originally Posted by KingMedia

#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).

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.

YellowGreenMedia · 16th Mar 2012, 05:34 AM

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

1234nasir · 17th Mar 2012, 11:24 AM

Really true analysis. Thanks to thread opener too.

Originally Posted by Legacy3

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.

design2convert · 17th Mar 2012, 01:33 PM

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

BizGrabbers · 17th Mar 2012, 11:57 PM

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

As always, when Will speaks, I listen.

how2no · 18th Mar 2012, 05:08 PM

Great info. Thanx Will.

T2007 · 5th Apr 2012, 10:04 PM

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!

WillR · 8th Apr 2012, 12:34 AM

Tammy,

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

More Ideas · 12th Apr 2012, 05:15 PM

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.

22nd Jan 2012, 06:34 AM	#1
WillR Digital Marketer War Room Member Join Date: 2010 Location: Australia Posts: 12,472 Thanks: 1,984 Thanked 8,187 Times in 4,079 Posts	Adding Transparency to Your Mobile Websites [Tutorial] Share on: 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
	. ➨ Here's How to Make Your First $177 Online This Week Using the Piggyback Method... .

22nd Jan 2012, 08:56 AM	#2
Pierre! HyperActive Warrior War Room Member Join Date: 2009 Location: Tucson, Arizona Posts: 215 Thanks: 166 Thanked 69 Times in 44 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: NICE tip WillR! Thank You for that. Patrick
	Internet Safety Tips - The Essentials Internet Safety Tips – “The Essentials” – Examples Of Attacks Check out this chapter, then sign up to download YOUR copy!

22nd Jan 2012, 09:36 AM	#3
bloggerd Advanced Warrior War Room Member Join Date: 2011 Location: United Kingdom Posts: 678 Thanks: 96 Thanked 171 Times in 141 Posts Blog Entries: 14	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Thankyou WillR for this tutorial. Cheers Ian
	How To Generate Your First Ever Commission Online In Just 14 Days

28th Jan 2012, 05:45 PM	#4
LiorN Active Warrior War Room Member Join Date: 2011 Location: Where Warriors Roam Posts: 93 Thanks: 82 Thanked 13 Times in 13 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Great tutorial Will How do you inser an image in the backround so we could see the image throuh the menu?
	Our Actions Proves What We Really Belive In

29th Jan 2012, 06:59 PM	#5
T2007 HyperActive Warrior War Room Member Join Date: 2007 Location: CA, USA Posts: 295 Thanks: 258 Thanked 55 Times in 29 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Thanks, Will, for this tip. As usual, you are on top of things

1st Feb 2012, 03:42 PM	#10
DanielaG Warrior Member Join Date: 2010 Posts: 26 Thanks: 11 Thanked 2 Times in 2 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: 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

1st Feb 2012, 04:40 PM	#11
Young Samurai In search of knowledge Join Date: 2010 Location: N. Ireland, the Golfing capital of the world Posts: 473 Thanks: 68 Thanked 56 Times in 48 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: 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.
	*Kyle*

1st Feb 2012, 04:45 PM	#12
DanielaG Warrior Member Join Date: 2010 Posts: 26 Thanks: 11 Thanked 2 Times in 2 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Thank you Kyle...will try it. And yes, I am using Will's templates...

3rd Feb 2012, 08:11 PM	#13
Young Samurai In search of knowledge Join Date: 2010 Location: N. Ireland, the Golfing capital of the world Posts: 473 Thanks: 68 Thanked 56 Times in 48 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Is there an optimum width for a background image?
	*Kyle*

21st Feb 2012, 01:01 PM	#15
KingMedia HyperActive Warrior Join Date: 2009 Posts: 168 Thanks: 33 Thanked 21 Times in 20 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: #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?

21st Feb 2012, 10:17 PM	#16
Daniel Evans VIP Warrior War Room Member Join Date: 2011 Location: United Kingdom Posts: 3,589 Thanks: 3,078 Thanked 2,279 Times in 1,276 Posts Blog Entries: 16	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Thanks Will I'll be applying this to my sites! Daniel

21st Feb 2012, 10:26 PM	#17
Jodik Warrior Member War Room Member Join Date: 2012 Location: Florida Posts: 27 Thanks: 13 Thanked 1 Time in 1 Post	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Great tip Thanks

21st Feb 2012, 11:44 PM	#18
Legacy3 Active Warrior Join Date: 2011 Posts: 59 Thanks: 9 Thanked 46 Times in 33 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: 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.

16th Mar 2012, 05:34 AM	#20
YellowGreenMedia Dave Zegers War Room Member Join Date: 2011 Location: The Hague Posts: 559 Thanks: 229 Thanked 207 Times in 118 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Thanks for that great tip, i will try this out at once
	Learn How To Setup Your Own Six Figure Lead Generation Business.

17th Mar 2012, 01:33 PM	#22
design2convert HyperActive Warrior Join Date: 2011 Posts: 249 Thanks: 27 Thanked 16 Times in 15 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Tips were really nice to enhance the quality of transparency of mobile site.
	eLeVaToR ShOeS for mEn Grab Your FREE Minisite, Twitter and Facebook Fanpage Designs! Cover Design \|Custom Wordpress \| CopyWriting

17th Mar 2012, 11:57 PM	#23
BizGrabbers Active Warrior Join Date: 2011 Location: Alabama, USA Posts: 73 Thanks: 70 Thanked 36 Times in 31 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: You learn something new every day. Thanks Will for the tip. As always, when Will speaks, I listen.
	BizGrabbers.com

18th Mar 2012, 05:08 PM	#24
how2no Active Warrior Join Date: 2003 Location: Tulsa, Oklahoma Posts: 50 Thanks: 14 Thanked 15 Times in 14 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Great info. Thanx Will.
	Visit ... The Insider's Circle 34 Free Reports. Tons of Downloads.

5th Apr 2012, 10:04 PM	#25
T2007 HyperActive Warrior War Room Member Join Date: 2007 Location: CA, USA Posts: 295 Thanks: 258 Thanked 55 Times in 29 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: 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!

8th Apr 2012, 12:34 AM	#26
WillR Digital Marketer War Room Member Join Date: 2010 Location: Australia Posts: 12,472 Thanks: 1,984 Thanked 8,187 Times in 4,079 Posts	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: Tammy, Contact me via email and I'll help you out.
	. ➨ Here's How to Make Your First $177 Online This Week Using the Piggyback Method... .

12th Apr 2012, 05:15 PM	#27
More Ideas Warrior Member Join Date: 2011 Posts: 25 Thanks: 1 Thanked 1 Time in 1 Post	Re: Adding Transparency to Your Mobile Websites [Tutorial] Share on: 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.