WordPress.org

1. initialsbr
   Member
   Posted 3 years ago #
   

   So I have a splash page that has a background image that automatically resizes to the browser width. And I want to use a variation on that image as the background of my blog. But I want it to function the same way. Here's the css I used on the splash page...

   html {
   	overflow: hidden;
   }
   
   #background {
   	width: 100%;
   	position: absolute;
   	top: 0;
   	left: 0;
   }

   In the index.html file I placed the background image in a div with id="background" and everything works fine...

   <div>
   <img id="background" title="" alt="" src="images/diamondigloosplash.png"/>
   </div>

   But I don't know where I put that div code in the theme files for it to function the same. I tried putting it in the index.php file and it's not working.

   Any ideas?

   Thanks!

2. e-sushi
   Member
   Posted 3 years ago #
   

   Heya!

   I personally would try this:

   html {
   	overflow: hidden;
   }
   #background {
   	position: absolute;
   	width: 100%;
   	height: auto:
   	top: 0;
   	left: 0;
   	z-order: 1;
   }
   #page {
   	/* this is the wrapper for your page content,
   	so it flows ontop of your background-image div */
   	z-order: 2;
   	position: relative;
   }

   and I would put the div at the bottom of the footer.php, like this:

   <div>
   <img id="background" title="" alt="" src="images/diamondigloosplash.png"/>
   </div>
   </body>
   </html>

   I think it's best down there since it is not really "part of the page content" but rather a "design element". This way, you won't hurt your SEO etc.

3. initialsbr
   Member
   Posted 3 years ago #
   

   Thanks a bunch! That's great. It's mostly working. I changed the position to fixed and the overflow to auto so it will stay static and still scroll for the content. But I think I'm missing something with the whole #page stuff. Only the navigation bar is showing. Not the header, sidebar, or posts or pages. My theme doesn't appear to have the id=page anywhere and when I tried to put a div around the index.php code with id=page nothing showed up.

   What now?

   Here is the site for more clarification...

   Thanks!

4. alchymyth
   The Sweeper & Moderator
   Posted 3 years ago #
   

   in the respective css code, try z-index instead of z-order ;-)

5. initialsbr
   Member
   Posted 3 years ago #
   

   Thanks! That did it!

6. RobinH00d
   Member
   Posted 3 years ago #
   

   when i use this code a still miss a piece of the lower part

   http://i41.tinypic.com/w1fggz.jpg

7. alchymyth
   The Sweeper & Moderator
   Posted 3 years ago #
   

   @RobinH00d
   more info; you won't get much help from an image.
   link?

   it's a html/css issue and has not much to do with word press

Topic Closed

This topic has been closed to new replies.