CODEWITHSUNDEEP
cssmenunavigationbackgroundtransparent
Gary Cao
Gary Cao

Reputation:

CSS "see-through" background - crazy navigation menu problem

I have a crazy navigation menu that I have to code. It's kind of tough. Please see the screenshot of the design here:

nav menu

navigation menu screenshot

As you can see, the background of the "Home" menu item is quite tough! I can't figure out how to make its background "see-through", meaning it cuts through the dark background and shows the patterned green background.

Do you know how to do this using css?

Thanks in advance.

Upvotes: 4

Views: 13011

Answers (5)

Logan Young
Logan Young

Reputation: 431

I suggest making a 30 x 1 (Height x Width) image, fill it black and set opacity on it to about 35%... Save as .png (not compatible with < IE7 browsers)

Add that image to your menu background CSS class as follows:

#MainMenu {
    display: block;
    height: 30px;
    background; transparent url("menuBG.png") repeat-x;
}

I know this works because it's what I did for my site. The site isn't complete, but you can check out a screenshot:

http://www.logansarchive.za.net/preview.jpg

HTH

Upvotes: 0

buti-oxa
buti-oxa

Reputation: 11431

You can emulate fixed background position unfortunately not supported by IE6 (see nerdposeur's answer) with careful "manual" positioning using background-position. Position the big image with 0,0 offset. Use the same image for selected tab, but offset it to the left and up by exactly the position of the top left corner of the tab. That will ensure exact matching of the two backgrounds you want.

You seem to have a fixed menu, so it means carefully writing background CSS for your four menu elements, one by one. Of course, if your menu is dynamic, this approach does not work. Here's a demo I quickly cooked up starting with this page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>CSS Tabbed Navigation</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {
        margin: 20px;
        padding: 0px;
        background: #CACCB4;
        font: 16px arial, sans-serif; 
        background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif'); 
        }

    pre {text-indent: 30px}

    #tabmenu {
        color: #000;
        border-bottom: 2px solid black;
        margin: 12px 0px 0px 0px;
        padding: 0px;
        z-index: 1;
        padding-left: 10px }

    #tabmenu li {
        display: inline;
        overflow: hidden;
        list-style-type: none; }

    #tabmenu a, a.active {
        color: #DEDECF;
        background: #898B5E;
        font: bold 1em "Trebuchet MS", Arial, sans-serif;
        border: 2px solid black;
        padding: 2px 5px 0px 5px;
        margin: 0px;
        text-decoration: none; }

    #tabmenu a.active {
        background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif'); 
        background-position: -125px -18px;
        border-bottom: 3px solid #ABAD85; }

    #content {font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
        text-align: justify;
        background: #ABAD85;
        padding: 20px;
        border: 2px solid black;
        border-top: none;
        z-index: 2; }

    #content a {
        text-decoration: none;
        color: #E8E9BE; }

    #content a:hover { background: #898B5E; }
    </style>
</head>

<body>

<ul id="tabmenu">
    <li><a href="tab1.html">Enormous</a></li>
    <li><a class="active" href="tab2.html">Flared</a></li>
    <li><a href="tab3.html">Nostrils</a></li>
</ul>

<div id="content">
  <p>If one examines subpatriarchialist material theory, one is faced with a choice: either accept the presemioticist paradigm of reality or conclude that the task of the artist is deconstruction, given that reality is equal to art. It could be said that the subject is contextualised into a Batailleist 'powerful communication' that includes language as a totality. Marx uses the term 'precapitalist semiotic theory' to denote the bridge between narrativity and society.</p>
  <p>Any number of desituationisms concerning Sartreist absurdity may be discovered. In a sense, the textual paradigm of consensus states that reality has significance. Baudrillard uses the term 'surrealism' to denote the absurdity, and subsequent rubicon, of substructuralist class. It could be said that la Tournier[4] holds that the works of Pynchon are modernistic. The premise of the textual paradigm of consensus states that the significance of the observer is social comment. However, in Gravity's Rainbow, Pynchon examines textual materialism; in The Crying of Lot 49 he denies subcultural discourse.</p>
    <br />
</div>

</body>
</html>

Upvotes: 0

nickf
nickf

Reputation: 546035

One way you could do it is the opposite approach you'd normally take. Apply a black background to the other elements, leaving a gap where the highlighted tab is. Kind of a reverse sliding doors.

Create two very long black images: one for the right which has a rounded corner on its left, and one for the left with the corner on the right and position them on either side of the current element. Sadly, I don't think plain CSS will be able to do this, but it looks like you're already using JS.

I'm not sure how feasible this will be, it's just off the top of my head, but it could be an interesting approach.

Upvotes: 1

Nathan Long
Nathan Long

Reputation: 125902

Another interesting approach to transparent (or translucent) effects is to give two sections either

1) the same background image, or
2) similar background images, with one of them modified with color or blur or whatever

... and make sure that their background-position is the same.

This is demonstrated in Eric Meyer's "Complex Spiral" demo. (Here's another version he made.)

Clarification: this is in Meyer's "Edge" section for a reason - it's not compatible with IE6. (Thanks, Boris.)

Upvotes: 0

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123453

You can use either:

background: transparent;
background: inherit;

But, you'll need to structure your HTML so that the Home, Journal, etc. links are embedded in the box with the background.

For rounded corners, check this out.

Or you can use images with shaped transparency as the background.

@Gary [comment]: inherit grabs the first settings it finds going up the hierarchy. So if you have a middle layer, it's gonna pick up on its settings instead.

Something you might try then is to use:

background-image: url('greencheckers'); /* outer */

background-color: black;                /* middle */

background-image: inherit;              /* link */

In theory, it should look for the first background-image setting, then. But, I've never used this, so no guarantees.

Upvotes: 2

Related Questions