Help with fixed menu with transparent images

Maggarama · 07-17-2011, 08:16 PM

Hi.

I'm creating a website with a navigation bar that is fixed at the top of the browser window. The images (logo and navigation buttons) are transparent so when the viewer scrolls, they can see through them to the background. The navigation bar itself is navy and extends all the way across the screen, and the background is different colors as you scroll down the screen. How do I make the 'background color' of the navigation bar navy without that navy being behind the navigation buttons (I want to be able to see through the buttons to the main page background. Say the main background is pink, I want the buttons to appear pink, then change to, say, blue if the main background is blue further down). The images are navy blocks with transparent text, but I want that navy color to extend across the entire length of the browser. I have one div for the entire navigation bar, and another div within it for the buttons/images.

Another important note, the navigation is made so when the browser is resized, the navigation stays centered.

Here is my code, if it helps:

body {
margin:0; padding:0;
}
#nav {
position: fixed;
height: 146px;
top: 0px;
left: 0px;
width: 100%;
background-image: url(images/scallop_03.png);
background-repeat: repeat-x;
background-position: bottom;
}
#nav_content {
width: 960px;
border-top-color: #003;
border-right-color: #003;
border-bottom-color: #003;
border-left-color: #003;
margin-right: auto;
margin-left: auto;
}
</head>
<body>
<div id="nav">
<div id="nav_content"><img src="images/nav_01.png" width="507" height="133" alt="Logo" /><img src="images/nav_02.png" width="144" height="133" alt="About Me" /><img src="images/nav_03.png" width="153" height="133" alt="Portfolio" /><img src="images/nav_04.png" width="134" height="133" alt="Contact" />
</div>
</div>

If anyone has any suggestions, that'd be great! Thanks!

I attached an image of what I have so far (ignore the black box...just a privacy thing)

07-17-2011, 08:16 PM	#1
Maggarama New Member Join Date: Dec 2010 Posts: 5	Help with fixed menu with transparent images Hi. I'm creating a website with a navigation bar that is fixed at the top of the browser window. The images (logo and navigation buttons) are transparent so when the viewer scrolls, they can see through them to the background. The navigation bar itself is navy and extends all the way across the screen, and the background is different colors as you scroll down the screen. How do I make the 'background color' of the navigation bar navy without that navy being behind the navigation buttons (I want to be able to see through the buttons to the main page background. Say the main background is pink, I want the buttons to appear pink, then change to, say, blue if the main background is blue further down). The images are navy blocks with transparent text, but I want that navy color to extend across the entire length of the browser. I have one div for the entire navigation bar, and another div within it for the buttons/images. Another important note, the navigation is made so when the browser is resized, the navigation stays centered. Here is my code, if it helps: body { margin:0; padding:0; } #nav { position: fixed; height: 146px; top: 0px; left: 0px; width: 100%; background-image: url(images/scallop_03.png); background-repeat: repeat-x; background-position: bottom; } #nav_content { width: 960px; border-top-color: #003; border-right-color: #003; border-bottom-color: #003; border-left-color: #003; margin-right: auto; margin-left: auto; } </head> <body> <div id="nav"> <div id="nav_content"><img src="images/nav_01.png" width="507" height="133" alt="Logo" /><img src="images/nav_02.png" width="144" height="133" alt="About Me" /><img src="images/nav_03.png" width="153" height="133" alt="Portfolio" /><img src="images/nav_04.png" width="134" height="133" alt="Contact" /> </div> </div> If anyone has any suggestions, that'd be great! Thanks! I attached an image of what I have so far (ignore the black box...just a privacy thing) Attached Images

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode