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.
-
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!
@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='http://localhost/wordpress/wp-content/themes/ml00/images/bgMain00.jpg' id='bgImg'/>");} elseif($page_id == 4) {print ("<img src='http://localhost/wordpress/wp-content/themes/ml00/images/bgAbout.jpg' id='bgImg'/>");} elseif($page_id == 6) {print ("<img src='http://localhost/wordpress/wp-content/themes/ml00/images/bgWeb.jpg' id='bgImg'/>");} elseif($page_id == 158) {print ("<img src='http://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.
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?
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='http://localhost/wordpress/wp-content/themes/ml00/images/bgMain00.jpg' id='bgImg'/>");} elseif($page_id == 4) {print ("<img src='http://localhost/wordpress/wp-content/themes/ml00/images/bgAbout.jpg' id='bgImg'/>");} elseif($page_id == 6) {print ("<img src='http://localhost/wordpress/wp-content/themes/ml00/images/bgWeb.jpg' id='bgImg'/>");} elseif($page_id == 158) {print ("<img src='http://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.
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:
- The topic ‘z-index issue with footer for twenty eleven’ is closed to new replies.