Z-index issue with Fluid Grid layout

Question

Hi,I'm using CS6 fluid grid layout and trying to place a menu on top of an image.  The menu div has an includes file with z-index:1000, position:relative The hero image is in a fluid div called "navigation"I set the "navigation" div with position:relative and z-index: 10  but can't get the menu to overlap the hero image...  https://goo.gl/d1rSpjHere's a screencap: http://prntscr.com/f94flr I would like the menu to appear something like this:  http://prntscr.com/f94frv Thanks for your help,Brandon

LGMTL · Accepted Answer

This is not too easy because the height and the width needs to be proportional.

Try the following

table {
width:50%;
background: url(http://loremflickr.com/320/240) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

That didn't seem to work either, once I set the bg as an image I lose the responsiveness, I see the image scaled to 100% at all times. Basically I'm looking to do something like the menu over an image like this: https://goo.gl/R3xIfT

I usually would go with your suggestion of the bg in a div, but it's the first attempt at using the Fluid grid layout and having some difficulty with it.

Update: Turns out the body tag works, setting the image to 100% auto-height and max-width.

Thanks again for your help on this, appreciate it.

Frank

BenPleysier · Answer

Set the image as a background image as per background-image | CSS-Tricks The article places the image in the BODY elemnt, you will place the image in the div id="navigation" tag.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded