Transparent Menu Bar Display

User 371048 Photo


Registered User
59 posts

Can someone show how to make/use a transparent top menu bar ... example that I would like to create is the graphic here at http://jayjaynet.com/dev4/images/1.jpg

The gray bar at top and bottom is transparent where you can see the background beneath it. When I make a transparent image, of course, it is transparent and never appears over the top of the background. I'm assuming there is some other way to accomplish this like means creating a partially transparent image over the top and then placing menu options over the top of that image that.

Thank you.
-- me



User 122279 Photo


Senior Advisor
14,621 posts
Online Now

Hi,

You can do this in two ways (at least).

1. Check www.fokaibalik.com and study the menu div. I created a translucent image in Photoshop that I used as div background under the menu.

2. You can use any image and set the transparency in the css, play around with the 0.4 and 40 until you have the transparency you want.
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 371048 Photo


Registered User
59 posts

That worked fine, Inger. Thank you!
-- me




Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.