Question

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

Answer 1

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.