I'm working on a page that should have two different backgrounds (.jpg and .png), one on the top, not repeating and one starting below it, filling the rest of the page. Since the attributes are different and IE doesn't like background images for html and body tags, I thought I assign the first one to the body tag and and second one to a div within the body tag. For testing purposes, I set the second background image to be displayed 100px100px away from the top left corner, but that's ignored for some reason as well. It's not working yet, the first background image is only shown in the top 2px, the second one takes up all the space - I'd appreciate any hints and ideas. The url:

buggy website

the css :

body {
  font:11pt/15pt Georgia,"Times New Roman",Serif;
  background: transparent url(http://www.iroke.de/wp/wp-content/themes/flex/images/background.png) repeat-x;


.background2 {
        background:transparent url(http://www.iroke.de/wp/wp-content/themes/flex/images/background.jpg) repeat;
        background-position: 100px 100px;
the html code:

HTML Code:
<body id="home" class="log">   <!--MODIFIED--><div class="background2">