Problemas con imagen fondo

juanleonardo · #1 (**permalink**) 24/01/2015, 07:53

Buenas,

tengo una pagina con la siguiente seccion:

Cita:

</head>
<body>
<div id="Main">

donde Main tiene el siguiente codigo CSS:

Cita:

#Main {
background:url(../Images/Picture2_BN.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 10px 30px;
}

el proble en este caso es q la imagen (Picture2_BN.jpg) siempre me aparece un poco mas arriba, es decir q no se ve desde el comienzo de la imagen.

Porque puede ser esto??
Gracias.

martinmiranda90 · #2 (**permalink**) 24/01/2015, 08:47

Hola. Pero ese es todo el código css del #main? porque si es así no debería salir un recuadro más grande que el tamaño del padding ya que no le has assignado ningún tipo de width o height.
Saludos!

jsstoni · #3 (**permalink**) 24/01/2015, 09:02

no tienes ningun tamaño definido en tu main por lo cual si el tamaño de la imagen es mas grande que el contenedor "div" se va posicionar mas arriba o mas a la izquierda por el cover

CSS

Código CSS:

Ver original#main {
    background: url(imagen.png) no-repeat;
    background-size: 100% 100%;
}

pzin · #4 (**permalink**) 25/01/2015, 02:49

¿No tiene tamaño definido? Los elementos de bloque tienen por defecto ancho y alto definido, cuyo valor es auto. Entonces ocupará todo el ancho y el alto será según el contenido. Que siendo un elemento cuyo identificador se llama main y viene justo después de body debo de sospechar gravemenete que tiene contenido suficiente para que tenga altura.

El valor cover hace precisamente eso que dices, ajusta el fondo de tal forma que se complete siempre el ancho o el alto sin deformar la imagen, por lo que casi siempre se verá recortado algo.

GekoDH · #5 (**permalink**) 25/01/2015, 07:10

Si la proporción de alto*ancho de la imagen no es la misma que la del hueco que tiene siempre se va a comer un trozo al ponerle cover.

Lo que se me ocurre es que pruebes a darle un background-position para intentar que se vea el trozo que no se ve, pero se dejará de ver el opuesto. Esto también es útil si quieres que se vea cierta parte de la imagen al encoger la ventana horizontalmente, si le pones "background-position: right" irá desapareciendo la parte izquierda y la derecha quedará visible.