Multiple background images

First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.

I have been trying to add background images - one at top left and one at bottom right. What I have at 开发者_运维知识库the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.

I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.

2 things I want this image to do, move with the browser window, and be able to go behind my main page.

Thanks for any help offered

You could try using fixed positioning and the use z-index to move it to the back, ie.

#bottom_leaf_holder {
  position: fixed;
  bottom: 50px;
  right: 0;
  z-index: -1;
}

edit: I ment fixed, changed the answer.

You could put all your content in a div, and add a css rule to that div. Something like

#main_holder {
    background: transparent url('img.jpg') no-repeat bottom right;
}

The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.