z-index issue with footer for twenty eleven

  • Hi all,

    I would like to preface this by saying that I’m modifying a local copy of twenty eleven.

    I added the following to my CSS:

    #dImgBg {position:fixed; width:100%; height:100%; overflow:hidden; z-index:0;}
    #bgImg {width:100%; height:100%;}

    I also added this to my header:

    <div id=”dImgBg”>
    <img src=”images/bgTmp.jpg” id=”bgImg”/>
    </div>

    This allows me to stretch / shrink a background image depending on browser/window size & not crop an image the way 2011 theme currently does.

    The problem I’m running into is that the footer completely gets “hidden” by the div, even though it’s still generated.

    I want the footer to show. I’ve added z-index: 99; for ALL the elements that are in the footer starting with #colophon but it still doesn’t work.

    Could someone please point me in the right direction?

    This has been a holding me up for a while…

    Thank you.

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

  • Where are you putting the div element (in your header.php I presume)? I am trying to do the same thing – get full width backgrounds for non-compliant browsers. CSS3 works fine in FF10, but not Chrome or IE8.

    My problem is I cannot get the image to display at all – I have been putting the div in the header.php at the very start of body definition, i.e.
    …
    </head>
    <body <?php body_class(); ?>>
    <div id=”dImgBg”>
    <img src=”images/bgTmp.jpg” id=”bgImg”/>
    </div>
    <div id=”page” class=”hfeed”>
    …

    I have had no issues with the footer.

    mlaurel I have just achieved what I needed by using the plugin Better Backgrounds with only one background image. Works in IE8, Chrome and FF10 – need to check a few more browsers – if only there was a plugin for that!

    Thread Starter mlaurel

    (@mlaurel)

    @halcyonweb – yes I do have that code in the header.php.

    I don’t think Better Backgrounds would let me have the specific backgrounds (after looking at the description) I have designed for the pages I have for my site.

    I added the following code to the header to show the appropriate background depending on the page:

    <div id="dImgbg">
<?php
/*
echo $page_id;
change bgImg depending on page.
*/
if ($page_id == 0)
	{print ("<img src='https://localhost/wordpress/wp-content/themes/ml00/images/bgMain00.jpg' id='bgImg'/>");}
    elseif($page_id == 4)
	{print ("<img src='https://localhost/wordpress/wp-content/themes/ml00/images/bgAbout.jpg' id='bgImg'/>");}
    elseif($page_id == 6)
	{print ("<img src='https://localhost/wordpress/wp-content/themes/ml00/images/bgWeb.jpg' id='bgImg'/>");}
    elseif($page_id == 158)
	{print ("<img src='https://localhost/wordpress/wp-content/themes/ml00/images/bgProject.jpg' id='bgImg'/>");}
?>
</div>

    I had all that working but…I just couldn’t figure out that z-index issue…perhaps I should’ve used a different theme to alter.

    Time constraint made me stop “reverse engineering” 2011 & decided to not to use WP as a CMS tool- but just use it as a commenting platform instead.

    Which is what I want to do & the CMS as an added bonus.

    Thread Starter mlaurel

    (@mlaurel)

    I forgot to mention I heavily edited files to get the div element & its content to show- but when I did this I couldn’t get the footer to show correctly.

    Where abouts in header.php did you insert your div code?

    Thread Starter mlaurel

    (@mlaurel)

    This is currently how my header.php is coded from the <body> tag down since the only change I made above the </head> was to add inline CSS for a jQuery based horizontal floating menu.

    <body><!-- <?php body_class(); ?> -->

<div id="dImgbg">
<?php
/*
		echo $page_id;
change the bgImage depending on page.
*/
if ($page_id == 0)
	{print ("<img src='https://localhost/wordpress/wp-content/themes/ml00/images/bgMain00.jpg' id='bgImg'/>");}
    elseif($page_id == 4)
	{print ("<img src='https://localhost/wordpress/wp-content/themes/ml00/images/bgAbout.jpg' id='bgImg'/>");}
    elseif($page_id == 6)
	{print ("<img src='https://localhost/wordpress/wp-content/themes/ml00/images/bgWeb.jpg' id='bgImg'/>");}
    elseif($page_id == 158)
	{print ("<img src='https://localhost/wordpress/wp-content/themes/ml00/images/bgProject.jpg' id='bgImg'/>");}
?>
</div>
<!-- -->
<div id="navi">
	<div id="menu" class="default">
	<!--code of floating bar goes here-->
		<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
		<!-- #access -->
	</div><!-- close menu -->
</div><!-- close navi -->

<div id="page" class="hfeed">
<!-- deleted items -->
		<!-- #access -->
		<!-- #site-title -->
		<!-- #site-description -->
		<!-- header -->
<!-- end deleted items -->

<!-- #branding -->
	<div id="main">

    After spending more time than I wanted to on modifying the theme, I wiped XAMPP & WP & moved them to a different HDD to mirror my server properly. I haven’t reinstalled the modified theme I was working on. I don’t remember if I commented out <?php body_class(); ?> to get it to work, but I THINK it (the div) still worked with it untouched.

    There was a bit of cajoling on style.css to get the div to show I remember changing A LOT of background attributes to none.

    Thread Starter mlaurel

    (@mlaurel)

    I have no way of testing with older IE browsers (yet) but I had all that working with the latest versions of IE9 FF, Chrome & WebKit.

    This something I ran into a few weeks ago & bookmarked:

    https://coding.smashingmagazine.com/2011/09/02/reliable-cross-browser-testing-part-1-internet-explorer/

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘z-index issue with footer for twenty eleven’ is closed to new replies.