WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How To Auto-Resize Background Image (7 posts)

  1. initialsbr
    Member
    Posted 4 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 4 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 4 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 4 years ago #

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

  5. initialsbr
    Member
    Posted 4 years ago #

    Thanks! That did it!

  6. RobinH00d
    Member
    Posted 4 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 4 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.

About this Topic