Como el problema estaba en el background del body he estado probando en crear otro div con el background en el. Y lo he puesto que envuelva el div del contenedor.
Y estaba muy contento viendo como funcionaba en el chrome. Más tarde probe en IE8 y en Opera y no anda de ninguna manera.
Las alternativas que probe son algo asi
Código:
html {min-height:100%}
body {
background-color: #000;
position:relative;
min-width:1024px;
min-height:100%;
}
#back {
background-image: url(images/fondo.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
position:relative;
left: 50%;
top: 50%;
width:1280px;
height:650px;
margin-left: -640px;
margin-top: -325px;
}
#container {
background-image: url(images/fondohome.jpg);
position:relative;
left: 50%;
top: 9px;
width:1000px;
height:600px;
margin-left: -500px;
margin-top: -300px;
}
y mi web es esta
http://www.davidcalf.com/
solo que las pruebas que voy haciendo no las voy a subir allí.
y después esta la opción que me recomendaron mas arriba que no entiendo como no puede funcionar bien, solo llega a funcionar si pongo el container en fixed
Código:
html, body{min-height:100%}
body {
background-color: #000;
background-image: url(images/fondo.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
position:relative;
min-width:1024px;
min-height:600px;
}
#container {
background-image: url(images/fondohome.jpg);
position:relative;
left: 50%;
top: 50%;
width:1000px;
margin-left: -500px;
height:600px;
margin-top: -300px;
overflow:visible;
}