¿Podría alguien explicarme por qué no me funciona bien background-position?

BramSt · #1 (**permalink**) 28/11/2015, 16:14

Estamos practicando en clase un ejercicio para poner fondo a una web a través de css, pero lo que me extraña es que al hacer:

Código CSS:

Ver originalbody{
background-image:url(Luna.jpg);
background-repeat:no-repeat;
background-color:blue;
background-position:center center;
 
 
}

La propiedad background-position sólo me "lee" el eje de las X (es decir, el primer center), pero no el eje de las Y (el segundo center)... O sea, que se queda la imagen en el centro, pero arriba del todo de la web...

Lo curioso es que si meto esos datos por píxeles o centímetros todo va bien, pero al utilizar porcentajes o como os he puesto en el código, sólo funciona el eje de las x...

Y hay gente de clase a la que le pasa lo mismo, pero otros a los que colocando el código exactamente igual, les sale bien...

Un saludo.

Ah, en el código HTML aún no hay nada, sólo el esqueleto de la web:

Código HTML:

Ver original<html>
    <head>
        <title>
        </title>
        <link rel="stylesheet" type="text/css" href="Estilos.css"/>
        
    </head>
    <body>
    
        </body>
</html>

pzin · #2 (**permalink**) 29/11/2015, 12:37

Cita:

Iniciado por BramSt

Ah, en el código HTML aún no hay nada, sólo el esqueleto de la web:

Por eso es.

Prueba a darle una altura mínima a html:

Código CSS:

Ver originalhtml {
  min-height: 100%;
}

BramSt · #3 (**permalink**) 29/11/2015, 14:19

Cita:

Iniciado por pzin

Por eso es.

Prueba a darle una altura mínima a html:

Código CSS:

Ver originalhtml {
  min-height: 100%;
}

Gracias! Ahora sí funciona!

¿Qué ocurre entonces, que al no haber nada en el código HTML es como si el body estuviera vacío y por eso no puede "tirar para abajo"?

PD: Perdón por equivocarme de subforo