continuous image revealed by menu opening?

**mgason** · Jun 18, 2011 06:14

Hi can I have a large background image which is hidden except for the area revealed when a menu opens?
The menu is created by the CMS and could be changed by the client so I can not just slice it up and ut pieces in the menu li
It is a bit hard to explain so I put up a page with a couple of graphics that shows roughly what I mean.
menu question

**deathshadow60** · Jun 18, 2011 06:37

The only way I can think to do that is to explicitly declare the widths and heights of all the elements in pixels... that way you can slide the background around as appropriate.

Which with cascading menus is the norm anyways in most cases. Of course, if they add/remove top-level menu items, the CSS would have to all be changed, breaking that idea.

On the whole, that's treading into what I've come to call a "But I can do it in Photoshop" idea. You may be better off (and the client would certainly be better off) if you scrapped that idea early on as it may not be a viable appearance if the client is going to be making changes to what's on the menu...

Especially if that's the actual image given the legibility issues it could cause on certain words (like where most of "blog" becomes invisible).

It can be done as a static menu nobody will edit -- beyond that, not so much... I SUPPOSE you could extract the position with a bit of javascript assistance, but I advise against that course of action as something so... artsy, isn't worth all the negatives.

**Paul O'B** · Jun 18, 2011 09:04

Hi,

You can do it quite easily by using background-attachment fixed and you don't need to do anything else special at all

All I did was add the fixed value to an existing menu and it more or less works out of the box. It won't work in IE6 and under though but they will just get a repeated background.

If the nav is in a centred page then change the background-position to 50%.

Code:

background:url(images/stripy.jpg) repeat fixed 50% 0;

As Jason said you would need to take care about colours vanishing in the background though.

**deathshadow60** · Jun 18, 2011 09:16

Huh, that's odd. I could have sworn I tried that like two years ago and couldn't get the background to inherit in any browser except Opera or IE...

So... Gecko and webkit have FINALLY caught up?

Wait... wouldn't that break if the page scrolls? (since the BG image isn't tile-able on the vertical?) -- oh, you omitted the gradient he had in the original. Yeah, that works if the image is repeat-y, which is the problem I had with it back in the day; I didn't want a repeat-y image behind it.

Though maybe a second CSS3 background gradient could be layered over it? (though again, that's reaching complexity levels I prefer not to see on a page for a purely presentational affectation)

**Paul O'B** · Jun 18, 2011 10:03

Originally Posted by deathshadow60

Huh, that's odd. I could have sworn I tried that like two years ago and couldn't get the background to inherit in any browser except Opera or IE...

So... Gecko and webkit have FINALLY caught up?

Wait... wouldn't that break if the page scrolls? (since the BG image isn't tile-able on the vertical?) -- oh, you omitted the gradient he had in the original. Yeah, that works if the image is repeat-y, which is the problem I had with it back in the day; I didn't want a repeat-y image behind it.

Though maybe a second CSS3 background gradient could be layered over it? (though again, that's reaching complexity levels I prefer not to see on a page for a purely presentational affectation)

Yes would be awkward with a vertical gradient as well so I ignored that

Can't have everything - but as you say css3 gradients could probably be used there but they would really slow gecko down.

**mgason** · Jun 18, 2011 20:07

Thanks for the replies,
I have 2 demos up...

1. uses the method of moving the big image around and displaying it in the ul's
That has the mentioned problem. The menu is Wordpress. So my client can come along and add a menu item. Also I would have to somehow get Wordpress to #id the menu items!
It sure does look the best. rainbow navigation

Maybe if they were fixed width AND I could get Wordpress to use an id I could make CSS that would take care of any reasonable number of menus? Of course I would have to worry about Wordpress changing the ids when an item was added!
Do you have any further thoughts?

2. The posted method, I did a little work on it. This works but does not look as nice as it does not have the variation of shade over the image vertically. It may have to be the solution though. I could not get a shadow on the menu bar, just on the sub menus? I am at the outer limits of my CSS knowledge now!
http://gasolicious.com/menu_question...wn-stripy.html

any ideas, any other ways to achieve this or make one of these 2 work better?
Even design ideas, something that would look good but avoid all of this trouble, say a different treatment for sub menus and just the gradient in the top bar.
Just a thought but is there any way css "clip" could help?

**Paul O'B** · Jun 19, 2011 01:38

Originally Posted by mgason

Thanks for the replies,
I have 2 demos up...

1. uses the method of moving the big image around and displaying it in the ul's
That has the mentioned problem. The menu is Wordpress. So my client can come along and add a menu item. Also I would have to somehow get Wordpress to #id the menu items!
It sure does look the best. rainbow navigation

I'm seeing a number of mismatches there in Firefox which is going to be your main problem. It is also goes awry if the user resizes the text unlike my example.

2. The posted method, I did a little work on it. This works but does not look as nice as it does not have the variation of shade over the image vertically.

If you used the same image as you were using in the first example then you would have your gradient.

Example here.

In my original I used the smaller slice because I didn't really notice the gradient and a 1k image is much better than a 50k one

In your first example you are still going to need that large image so there is no extra drawback in my method.

Perhaps as a compromise you could make a smaller gradient section and join it as I did for my second example so that it tiless seamlessly and forever.

Whatever method you use you are still going to need the same image because all of the image has to be available for that gradient effect.

**mgason** · Jun 19, 2011 21:29

Hi,
I was too busy to really poke around in your solution the first time I replied. Not that I probably would have figured out that I could use the big image anyway!
Today I did start going over your code, I am both seriously impressed and confused.
So I hope you have time to share some of your impressive knowledge

The basic list menu stuff I understand, but I have a bunch of questions

1. The first is the big I can not make it work question.....
I can not get the main ul to be 950 wide, it is just the sum of its parts.
I also can not get a div to wrap around the main ul and have the background in it. The background disappears?
I would like the li's to NOT have a fixed width, I get how to do that, BUT I need the nav bar to still be 950px wide. (hence my attempts to wrap it in a div with background)

Ok now some please explain stuff so I actually learn something...

2. Are you fixing the image position in relation to the browser but still making it the background of the li's link?
can it be fixed in relation to a container?

3. what is going on with margin-left:-999em;?

4. what is "commented backslash mac hiding hack" about?

5. you have a javascript for IE7 doing something with hover? what does it fix?

6. Ok last one is a why does it not work, I tried to add a shadow to the menu and could only get it to work on the sub menus.

Maybe you know a tutorial that explains doing this background trick with a menu?

Thanks heaps for your help

**mgason** · Jun 20, 2011 02:21

OOPS, DOH! and other expressions of my own stupidity!!

Please ignore all of my can't make it work question 1.
I had not given the 950 wide div with the menu inside a height, so obviously I could not see it.
Well it was obvious after I followed your "read my css articles" link and read a couple on absolute positioning.
The ul is out of the flow so it does not give the div a height, is that right?

I think I solved my drop shadow problem, so forget question 6 too!
I am in danger of learning

I put a new version online. I got the graphic down to 25k, can get it smaller. I will also make it vertically seamless. I am happy with that file size as I use it in several places.
http://gasolicious.com/menu_question...-stripy-2.html

Please critique my beginner changes!

Thanks

**Paul O'B** · Jun 20, 2011 02:49

Originally Posted by mgason

Hi,
Ok now some please explain stuff so I actually learn something...

2. Are you fixing the image position in relation to the browser but still making it the background of the li's link?
can it be fixed in relation to a container?

This is the "why" this solution works.

A fixed positioned element or a fixed background attachment is always relative to the viewport. So when you apply background-attachment fixed to an element then the background will only show in that element as long as it is over the image.

If for arguments sake the image was say 20px x 20px and we placed it at top left (0 0) with no repeat then it gets placed in the top left of the viewport. However if your element is at a position in the page that is further away from the top than 20px then nothing will show because the image isn't attached to the element - it's attached ot the viewport.

You can think of the element as a window that opens onto the background underneath and you have to move this window around until you can see the image.

When we use the repeating image on the background then the whole viewport is covered but we will see through our "window" only the part of the image that lies exactly in that spot - which is just what you wanted for this example.

3. what is going on with margin-left:-999em;?

It's an offscreen hiding technique that is kind to screenreaders (and search engines) because content is not removed as would happen with display:none. It also works better in older ie versions (7 and under) as they quite often don't like the reflow that display:none causes.

It's also better than using left:-999em because IE7 is buggy with that also. I find the margin-left:-999em approach the most stable and never have any problems with it unlike other methods that seem to cause bugs once in a while and as seen in the forums from time to time.

4. what is "commented backslash mac hiding hack" about?

That is from an old old old menu and is not needed these days and is a technique fro hiding certain code from IE5 mac. No one supports IE5 mac (apart from one person I saw the other day who had to support it ) so ignore it.

5. you have a javascript for IE7 doing something with hover? what does it fix?

No the code is for IE6 and under because they don't understand hover on anything but anchors so you need to add this function with script. IE7 doesn't need the script and the code you saw:

Code:

if lt IE 7

That says "If less than IE7".

You can read more on Conditional Comments here.

Maybe you know a tutorial that explains doing this background trick with a menu?

I haven't seen it done before so unless I write one I can't point you anywhere useful

I put a new version online. I got the graphic down to 25k, can get it smaller. I will also make it vertically seamless. I am happy with that file size as I use it in several places.

The only suggestion I could make depends on whether you wanted a smooth gradient transition on the longer menus. On the menu above if you drill down to the third level you will see the menu gradient repeating again and giving a sharp cut off.

This doesn't happen in my last example because I took your image and then flipped it vertically and stitched it to the bottom so that the gradient goes up and down continuously without noticing. It does of course mean using a bigger image.

I'm not sure if you wanted that smooth effect anyway but if you did then you'd have to use the method above or at least make sure your image is as tall as all the items in your menu (but of course that assumes the menu is at the top of the page).

**mgason** · Jun 20, 2011 06:40

I actually understand!!
This my friend is genius

So when you apply background-attachment fixed to an element then the background will only show in that element as long as it is over the image.

Fixed background in the browser I understood, attaching it to the object by assigning it there I had no clue about.

margin-left:-999em a very useful piece of info.

I haven't seen it done before so unless I write one I can't point you anywhere useful

So I am the second to know this trick, well let me think so

Your explanation is all I need.

I DO have more questions, what a pest.

1. top: -0.1em;
how does this work, it moves the sub-sub menu ul up a whole li?
How can I get the sub-sub menus to line up perfectly as I am using borders? I can't just remove that I discovered.

2. any suggestions on a hover highlight, text color is not much, and it seems you can not use background-color? My dream was a semi-transparent box. I updated the file online http://gasolicious.com/menu_question...-stripy-2.html

3. How does this work in older browsers, does this all work? (well not the shadow I know, but thats fine).

I took your image and then flipped it vertically

I had the same idea on the image, I made a new shorter one, flipped it, managed to keep it down to 26k. I also modified it a little to get rid of the 2 bright patches to help menu readability.

Thanks so much, this has been a great learning experience, and I have a cool menu

**Paul O'B** · Jun 20, 2011 07:41

Originally Posted by mgason

1. top: -0.1em;
how does this work, it moves the sub-sub menu ul up a whole li?
How can I get the sub-sub menus to line up perfectly as I am using borders? I can't just remove that I discovered.

Use top:-1px and the lists will line up exactly.

Code:

#nav li ul ul {
    border-top:1px solid #fff;
    position: absolute;
    left:100%;
    top: -1px;
    margin-left:-999em;
}

2. any suggestions on a hover highlight, text color is not much, and it seems you can not use background-color? My dream was a semi-transparent box. I updated the file online http://gasolicious.com/menu_question...-stripy-2.html

You could use opacity on the dropdowns to get a rollover effect (can't do the top level though so I just gave the top level an underline).

Code:

html, body {
    margin:0;
    padding:0;
    background-color:#fff;/*#577182;*/
}
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:100%;
}
#navbar {
    height:3em;
    width:950px;
    margin: 50px auto;
    border:1px solid #fff;
    background:url(http://gasolicious.com/menu_question/images/menu_bar_streak_400_reflect2.jpg);
    -moz-box-shadow: 10px 10px 10px #999;
    -webkit-box-shadow:10px 10px 10px #999;
    box-shadow:10px 10px 10px #999;
}
#nav, #nav ul {
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav ul {
    margin:0;
    -moz-box-shadow: 10px 10px 10px #999;
    -webkit-box-shadow:10px 10px 10px #999;
    box-shadow:10px 10px 10px #999;
}
ul#nav li {
    position: relative;
    float: left;/*width:237px;*/
}
#nav li ul {
    position: absolute;
    left: 0;
    top: 3em;
    margin-left:-999em;
}
#nav li li {
    width:200px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
    border-left:1px solid #fff;
    clear:left;
}
#nav li ul ul {
    border-top:1px solid #fff;
    position: absolute;
    left:100%;
    top: -1px;
    margin-left:-999em;
}
/* Styles for Menu Items */
#nav li a {
    line-height:3em;
    display: block;
    text-decoration: none;
        background:url(http://gasolicious.com/menu_question/images/menu_bar_streak_400_reflect2.jpg) repeat fixed 50% 50px; /* IE6 likes a background here */
color: #fff;
    padding: 0 20px;
    font-weight:bold;
    zoom:1.0;
}
* html #nav li a {float:left}
* html #nav li li a {float:none}
#nav li:hover a,#nav li.over a{text-decoration:underline;}

/* this sets all hovered lists */
#nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
    color: #fff; /*background-color: red;*/
    opacity:.5;
    filter:Alpha(Opacity=50);
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
    color: #fff; /*background: #fffccc;*/
    opacity:1.0;
    filter:Alpha(Opacity=100);
    text-decoration:none;
}
#nav li ul li a {
    padding: 0 30px;
} /* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
    margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul, u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
    margin-left:0;
}

3. How does this work in older browsers, does this all work? (well not the shadow I know, but thats fine).

Your version isn't working in IE6 but I've added some fixes for you in that snippet I just posted. IE6 stretches widthless floats to 100% wide unless you float the inner element also.

IE6 will just get a repeated background although it should be quite usable.

**mgason** · Jun 20, 2011 07:53

Hi,
1am in Australia, must sleep!
quick extra question, I added a background to the page, much to my surprise it did not seem to clash with the gradient.
Well it did clash if I had it in the body, but worked in the html style. I have not seen that before, is that a legit thing to do????
It is at the link in my previous post

Code:

html { 
	background:url(images/bgWhiteShadow1.png) repeat-y center top;
	background-color:#fff
}

**Paul O'B** · Jun 20, 2011 08:25

Hi,

Not sure what you mean by clash as I can't see any difference if the image is on the html or the body. I tested on your site live with firebug and saw no difference unless I'm missing something. As a rule of thumb you don't want to mess with the html element except for negating margins, padding and adding height:100% where needed.

Images placed on the body element automatically propagate to the html element anyway.

I updated my example to the changes I mentioned before except I swapped out the stripy image for a picture of my granddaughter

As mentioned earlier you do have to be careful with the readability contrast of text on backgrounds like this and some of the white text gets a bit lost in my example.

Also make sure that you have some contrast should images be missing otherwise you may get white text on a white background

**mgason** · Jun 21, 2011 05:59

Thanks awesome!
Do I detect a proud grandfather

So cute! proud grandpa had to build a really big menu so it showed her whole face I see.
It makes me think of a friend who wants a site for her little kids clothing shop.

Not sure what you mean by clash

I believe I said it was late, problem was I was adding the background to the style which was both html and body. Adding it twice I guess. Now it is in the body and fine.
Love the transparency effect, just what I was trying to describe. I had considered the "what if the images don't load scenario." I noticed you added a color to the page. My area was white so I picked a background color for the nav bar and another for the sub menus. Managed to get it working with highlighting in the no image version without messing up the image version. Without asking for help!!
no image load version here (just mis-named the image) http://gasolicious.com/menu_question...-no-image.html

I also moved the sub menus 1 pixel left as I noticed on yours it did not line up on the left on your home menu.

I tried a dark border top and left on nav bar plus left on sub menus but it just distracted from things.

Thanks so much for your help, I can not tell you how happy I am to have this work. When I posted the question I was pretty sure the answer was "no can't be done" I admit I posted to 4 CSS forums, everyone said no way. I think this is our secret

regular finished one here http://gasolicious.com/menu_question...-stripy-2.html

Now to integrate it into the site, I will post a link when I am done
once more thanks
mark

**Paul O'B** · Jun 21, 2011 07:36

Originally Posted by mgason

So cute! proud grandpa had to build a really big menu so it showed her whole face I see.

lol - you noticed that

Thanks so much for your help, I can not tell you how happy I am to have this work. When I posted the question I was pretty sure the answer was "no can't be done" I admit I posted to 4 CSS forums, everyone said no way. I think this is our secret

regular finished one here http://gasolicious.com/menu_question...-stripy-2.html

Now to integrate it into the site, I will post a link when I am done
once more thanks
mark

Glad that we got something working. I must admit I quite like the effect although as I said above it should be used with care when using different backgrounds etc.

I ought to write it up as an article for posterity.

**mgason** · Jun 21, 2011 20:32

I ought to write it up as an article for posterity

yes I suppose we must share.

believe it or not I have more questions

You could use opacity on the dropdowns to get a rollover effect (can't do the top level though

why? Not complaining just wanting to learn, is it because i have a matching background in the div so visually it has no effect, or some CSS technical issue?

IE6 will just get a repeated background although it should be quite usable

I am not sure what you mean, not a big gradient background for the page?

I tested the page in Adobe Browserlab. I am not convinced of that services total accuracy. I am posting a page with some screenshots of different browsers. Seems most are fine. I suspect people who use non-standard browsers, eg not the one that came with their OS probably keep up to date. I could be wrong about that. Anyway the one I am most concerned about is of course IE
I get no white page background panel in IE6.
Also noticed that even up to IE9 it shows no drop shadow. Is that correct? 7,8,9 all looked the same.

older firefox seems to do something odd with the alignment of the background and menu? background is 1100px wide and the browserlab preview is a bit under a 1000px
http://gasolicious.com/menu_question...reenshots.html

sorry to be a pest
did I tell you how cute ruby is

**Paul O'B** · Jun 22, 2011 07:26

Originally Posted by mgason

why? Not complaining just wanting to learn, is it because i have a matching background in the div so visually it has no effect, or some CSS technical issue?

The problem is that you have repeated the background image on the top level ul so when you try and make the background opaque the background underneath is still there so that you don't get any opacity apart from the text.

Have a look at my example (refresh) and I am now removing the top level image on hover and that allows me to apply a transparent solid background to get the closest sort of effect you can get.

The only other alternative would be to remove the background image from the top ul but then of course the image would only go as far as the list items - which would not be much use

IE6 will just get a repeated background although it should be quite usable

I tested the page in Adobe Browserlab. I am not convinced of that services total accuracy. I am posting a page with some screenshots of different browsers. Seems most are fine. I suspect people who use non-standard browsers, eg not the one that came with their OS probably keep up to date. I could be wrong about that. Anyway the one I am most concerned about is of course IE
I get no white page background panel in IE6.
Also noticed that even up to IE9 it shows no drop shadow. Is that correct? 7,8,9 all looked the same.

older firefox seems to do something odd with the alignment of the background and menu? background is 1100px wide and the browserlab preview is a bit under a 1000px
Untitled Document

Ie6 will just get a normal repeated images as it doesn't understand fixed positioning at all. The list element will show whatever part of the image that fits in the width and height of the anchor just like any normal image starting at the position specified in the background-position property. It will not reveal more of the picture but will just display the same slice in every anchor. It is quite usable though.

IE7 and 8 will get the correct image display but won't get the box shadow.

Your page does have the body background missing and the shadow missing in IE9 but strangely enough when I copy your code and upload it to my server then it works fine. that would seem to indicate that there is some sort of issue with your server. You'll have to investigate that further yourself I;m afraid as I don't get involved in server side issues. These problems usually occur with free hosts.

There is however a box-shadow bug in IE9 and if you have hover effects on elements with box-shadow you get a flash of black background. This seems to only happen when the two images are overlaid and in my example above the problem has been solved by removing the image from the anchor on the top level. box-shadow seems to be buggy in IE9 and as I noted earlier in the year on my salmon demo for the sitepoint competition

I could see no problems in Firefox 3.6 or indeed FF2 but if you have the window smaller than the background image then the background will slide away because you centred the image on the body. You would need to apply a min-width to html,body that matches the width of that image (or at least the width of the center part without shadows).

**mgason** · Jun 22, 2011 17:44

Thanks,
I used Adobe Browser lab, an adobe service, to generate those shots, that is it uploads the files from my local machine and then generates screenshots for all the different browsers. Like I said I am not always sure it is right.

I will toss in a min-width.

I think we are backward browser compatible enough for me!!

I am on a mac and also away from home, so I do not have a PC to test IE on. I did find a machine today and all looked fine from my server in IE9.
Background missing shot was IE6, I think I will just make a div with white background in that area as backup.

thanks for your comments, and again for the awesome solution.

I shall leave you some time to play with your grand daughter now.

**gasonm** · Dec 7, 2011 10:37

Hi,
well your grand daughter is 6 months older now, that has to be a good 50% older no? I took all of your great advice and added the menu to this site http://thecraftcircle.com.au/
I have heard from the site owner that the menu is not opening in IE7. She has checked on both her computer and her husbands. The weird thing is it was working. I am on a mac. Do you have any clues as to why it may not be working. I thought it was fine with fallback to plain colors but otherwise full functionality. To be clear she says the sub menus and sub sub menus do not open. Only the top links work.
Do you have any resources for checking this sort of thing. Right now I am thinking I need to go out and buy 2 or 3 old laptops just so I can check IE performance?

**Paul O'B** · Dec 7, 2011 11:18

In your IE7 stylesheet you have hidden the overflow on the menu which menans the nac can nver show,

Code:

#main-nav-container {max-height:35px;overflow:hidden;}

Remove that whole line and it will work in IE7.

well your grand daughter is 6 months older now

Yes she'll be two in January and my daughter just had another one at 6 o'clock this morning

**TechnoBear** · Dec 7, 2011 11:26

Off Topic:

Originally Posted by Paul O'B

Yes she'll be two in January and my daughter just had another one at 6 o'clock this morning

Congratulations, Grampa

**gasonm** · Dec 7, 2011 12:25

Congratulations! and you still took time to answer my question, what a guy. Hope all are happy and well
thanks yet again
Mark

**Paul O'B** · Dec 7, 2011 16:57

Yes all are fine - thanks all

**gasonm** · May 5, 2012 08:33

Hi,
I am away in Australia, my friend tells me after I did some updates to her site the menus do not work again, in IE7. I made sure i had the fix you gave me previously. I have not seen the problem, on a mac here while away. I had someone confirm for me. They said fine in IE8 and 9. Menus do not open in IE7 again.
Also now the product images do not appear in IE7, they do momentarily then vanish, also in IE only 2 across not 3.
Insert all too familiar rant about IE here. Hope you can help.
http://thecraftcircle.com.au/products-page/red-pinks/

User Tag List

Thread: continuous image revealed by menu opening?

Thread Tools

Display

continuous image revealed by menu opening?

Bookmarks

Bookmarks

Posting Permissions