Background viewing problem with IE

[jofera]

I'm trying to make my own template, and I need the background separated in three parts: top border, main background and botttom border. The main background must repeat lengthwise and widthwise to fill the screen, and the other two parts only will repeat widthwise because they have a fixed size. I devise doing this developing two tables (in the sides of main page) with three rows each one like this:



For each row I apply a different CSS style:
#fondo1 { /*top border*/
background-image: url(../images/fondo/01.jpg);
background-repeat: repeat-x;
}

#fondo2 { /*main background*/
background-image: url(../images/fondo/03.jpg);
background-repeat: repeat;

}

#fondo3 { /*bottom border*/
background-image: url(../images/fondo/02.jpg);
background-repeat:repeat-x;
}

In firefox and Safari works really good, but IE don't show correctly the main background (it doesn't repeat). I attach two screenshots from firefox and IE:





Thanks!!!

[jofera]

I forget.. the webpage url is: http://www.tucachimba.es/tienda

[kobra]

I do not use tables for this type of design "ever"...

You can do this with two images

one about one of your header tiles wide and approx 1400px high with your body pattern below the the header tile but all in a single image - repeat y and attach to the existing body tag

The other repeat x and the tile for the bottom attached to your existing footer tag

[jofera]

I understand, and how many layers should I create? One for the entire page and one inside another one for the background? I don't know if I explained well

[kobra]

I understand, and how many layers should I create?

Guess I do not understand???
No layers - - just two images
Where is your site?

[jofera]

Guess I do not understand???
No layers - - just two images
Where is your site?

http://www.tucachimba.es/tienda

[jofera]

I create the background image as you said, but now I have a problem with the footer tile. I deleted my old main-page side tables, and I set the new background image in my CSS stylesheet, and for the footer tile image I created one div at the end of the tpl_main_page.php with this CSS style:

#footer_bg {
position: inherit;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-image: url(../images/fondo/02.jpg);
background-repeat:repeat-x;
height: 80px;
width: 100%;
}

The background it's working fine, but I want the footer tile to be behind the main wrapper always that's possible. I think is a div possition problem, but I do not have much experience with this.



Thank you!!

[kobra]

Viewing your source, I do not see the div footer_bg??

It is in your css but where have you defined it in the code ??