Altura imagen background responsive

[miguelgalannunez]

Hola chicos,

En mi web -> http://paupiap.com/ tengo una imagen de fondo de 1840px de ancho por 995px de alto y en mi css la tengo con estilo background-size: cover.

Pero si se fijan al hacer responsive la ventana del navegador se corta la imagen.

Como puedo hacer??

Muchas gracias

[va4go0balboa]

podrias mostrar tu codigo..... creo que seria mas facil ayudarte de ese modo!!! n,n

[miguelgalannunez]

Lo unico que tengo para el background es esto

.home {background-image: url("http://paupiap.com/wp-content/uploads/2015/03/bgpaupiap2.jpg");
background-size: cover;}

[va4go0balboa]

ho sii... fui a tu www y creo ke es la imagen de fondo la que te da un poco de problemas no...???
lo que hay que hacer en estos casos es que hagas un auto ajuste a la imagen..... ahi mismo en css hay herramientas que puedes utilizar... aunque no se si estes usandop el bloc de notas para programarla o si estes usando un gestor como dreamweaver...???

[miguelgalannunez]

Es una web hecha en Wordpress y estoy tocando el CSS dentro del panel de la plantilla.. Habría solución??

[va4go0balboa]

max-width: 565px;
width: expression(this.width > 565 ? 565: true);

prueba con esto..... claro que en donde estan los px tu calcularas el tamaño.... n,n

[miguelgalannunez]

No me funciona..

El código está ahora así ->

.home {background-image: url("http://paupiap.com/wp-content/uploads/2015/03/bgpaupiap2.jpg");
background-size: cover; background-position: fixed; max-width: 565px;
width: expression(this.width > 565 ? 565: true);}

[va4go0balboa]

quitale background-position: fixed; n,n

[miguelgalannunez]

Porque el contenido de mi página (logo e email) se encuentran ahora a la derecha?

[va4go0balboa]

cuando usas las css debes crear clases por cada parte del diseño que quieres editar... entonces estas englobando todo..... por eso tu imagen no se edita.... y lo que debes hacer ahora es poner otra vez el background- position fixed.... y background size... aunque lo unico que hara es reducir la imagen y quedara incompleta en la pnatalla... ahora lo que tu debes hacer es una clase en el css para redimenzionar la imagen....

.imagen img {
max-width: 650px;
height: auto;
}
debes crear alog como esto mas o menos..... n,n

[miguelgalannunez]

No me ha hecho falta crear otras clases.. Simplemente he modificado el tamaño de los pixeles y queda así

.home {background-image: url("http://paupiap.com/wp-content/uploads/2015/03/bgpaupiap3.jpg"); max-width: 1500px; width: expression(this.width > 1500 ? 1500: true);}

LINK: www.paupiap.com

Que opinas??

[miguelgalannunez]

Pero ahora me doy cuenta que entrando desde el movil no se ve la imagen.. solo el cielo de la imagen.

[va4go0balboa]

Pues si se ve bien... aunque en la imagen solo se ven los techos de una casa..... creo que si hicieras una clase donde puedas redimenzionar tu imagen para que conserve el tamaño y ademas pueda apreciarse completa embellecería todavia mas tu www..... pero si ve bien!!!! n,n

[miguelgalannunez]

Podrías ayudarme a hacerlo.. soy novato en esto y quiero tener una web bonita pero me cuesta mucho..

¡¡Te lo agradecería un montón!!

[va4go0balboa]

aqui te dejo este codigo espero y te pueda servir tambien..... quizas tengas que hacerle algunos ajustes pues estas programando en wordpress....

html {
background: url(background.jpg) no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

pero puede ser mas utilizable.... n,n

[pzin]

fixed no funciona en dispositivos móviles, entonces la imagen de fondo se verá mal.

cover siempre recorda una parte del fondo, bien por la vertical, bien por la horizontal.

El caso es que si quieres que el fondo ocupe todo sin deformarlo, siempre se recortará por alguna parte.

Y eso de width: expression… fue un invento de Microsoft que solamente funcionaba en IE5-7 me parece.