How To Auto-Resize Background Image

  • Resolved initialsbr

    (@initialsbr)


    14 years, 11 months 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!

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

  • 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.

    Thread Starter initialsbr

    (@initialsbr)

    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!

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

    Thread Starter initialsbr

    (@initialsbr)

    Thanks! That did it!

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

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

    @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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How To Auto-Resize Background Image’ is closed to new replies.