Layering/Stacking DIVs? Help!

  • Hello,

    I am trying to accomplish the following…

    My website has a striped background (fixed; not scrolling) and the sheet lies on top of it. I have a separate image, a gray bar and white frame, that I want to use as a FIXED (not-scrolling) header so that when you scroll, the sheet goes BEHIND the header…

    I created a DIV called “banner” that I put into my header.php and it is showing exactly like I want it to… except that when you scroll, the sheet goes IN FRONT of the header… can anyone help me figure out how to get the sheet to go behind? I gave the “banner” div I high z-index value… but apparently that didn’t work?

    “banner” div that I created:

    .banner
{
  z-index: 9000;
  height: 274px;
  top: 0px;
  background-image: url('images/jkl_bkgdbar.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top center;
}

    the relevant text in my header.php:

    <div id="art-main">
<div class="banner"></div>
<div class="art-sheet">
    <div class="art-sheet-tl"></div>
    <div class="art-sheet-tr"></div>
    <div class="art-sheet-bl"></div>
    <div class="art-sheet-br"></div>
    <div class="art-sheet-tc"></div>
    <div class="art-sheet-bc"></div>
    <div class="art-sheet-cl"></div>
    <div class="art-sheet-cr"></div>
    <div class="art-sheet-cc"></div>
    <div class="art-sheet-fgb"></div>
    <div class="art-sheet-body">
<div class="art-nav">
	<div class="l"></div>
	<div class="r"></div>
	<div class="art-nav-center">
	<ul class="art-menu">
		<?php art_menu_items(); ?>
	</ul>
	</div>
</div>

    I appreciate any and all help! I need to get this website finished up ASAP!

Viewing 7 replies - 1 through 7 (of 7 total)

  • z-index only works if you have a position set in the CSS for that element.

    https://www.w3schools.com/cssref/pr_pos_z-index.asp

    If you need further help, please post a link to your site.

    Thread Starter KMLProxy

    (@kmlproxy)

    Whoops, I meant to include a link in my original post…

    Hope this helps!

    https://www.joanna-kyle.com/

    Did you make the suggested correction?

    I’m looking at it…

    I’m pretty sure you can’t use z-index on a background image — you would need to put the image in the page content.

    Thread Starter KMLProxy

    (@kmlproxy)

    Alright, I’ve inserted the img link into the page content, within the <div> “banner” tags… additionally, I’ve added an overflow: hidden; parameter to my “banner” div…

    Now, however, I have two problems…

    1) My header image was made deliberately over-long – to compensate for large resolution monitors… as such, the image is currently off-center – how can I get that image centered? (The problem is evident if you visit the site)

    2) The header div scrolls WITH the sheet, rather than remaining fixed… it was originally held fixed due to the fact that it was a background image and I had the position property fixed… how can I give this container a fixed (non-scrolling) marker now?

    I really appreciate the help.

    You’ll likely need to make the header image into two images – one for just the grey background and a separate image of the part with your names. Then you can center the later one using auto side margins in the CSS. I’m not yet sure you will be able to do what you want given all these layers and complex CSS.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Layering/Stacking DIVs? Help!’ is closed to new replies.