Two separate background images.

Question

I want to have my page to have two background images: one at the top, and one at the bottom. I don't want them static, though. How would I do this?

Answer 1

Use divs with background images and place them appropriately either using your layout or with the positioning attributes. You could take the one for the top, put it in a div that is absolutely positioned and z-indexed to be underneath your regular page. Then the other one could be put in the body style and positioned at the bottom.

Answer 2

Make two nested layers with zero margin and padding, like so:

<div class="outer">
  <div class="inner">
    <!-- Page goes here. -->
  </div>
</div>

Then have a separate background-image for outer and inner, one fixed to the top, one fixed to the bottom:

.outer {
  background-position: bottom;
  // ...
}

.inner {
  background-position: top;
  // ...
}

Answer 3

It really depends on what you need the page to look like and what the background images are. If you want a solution you need to post more detail preferably with a composite image of whatthe page should look like and an example of the images by themselves.

that said one way might be:

html {backgoround: trasnparent url(/path/to/image) scroll no-repeat top center;}
body {backgoround: trasnparent url(/path/to/other-image) scroll no-repeat bottom center;}