Ajustar dimensiones de imagen de fondo en un div

[miriamgomez]

Hola:

Quiero poner una imagen de fondo en un div.

El div no tiene dimensiones fijas, se ajusta en función de la dimensiones de la resolución de la pantalla.

He dado con este metodo:

Código PHP:

      background: #edde8d url("fondo cuerpo.jpg") top center repeat-y;
background-size: 100%;   
-moz-background-size: 100%; 
  -o-background-size: 100%;  
 -webkit-background-size: 100%; 
   -khtml-background-size: 100%; 
   

Pero me ajusta tanto el largo como el ancho. Yo solo quiero que se ajuste el ancho, manteniéndose el alto constante.

¿ hay manera de hacerlo?

un saludo

[TSG]

Para poner un fondo a la página de un color se puede usar esto:

Código CSS:

body{
     background-color: #000;
}
 

Y si es una imagen podrías usar esto:

Código CSS:

body{
     background: url(direccion de la imagen);
     max-width: 100%;
     max-height: 100%;
}
 

¡Felices fiestas!
Saludos.

[miriamgomez]

igual me explique mal.

Se trata de redimensionar la imagen del fondo del div, no el div en si.

[pzin]

Intenta con:

Código CSS:

background-size: cover;
 

Si la imagen tiene la misma altura que el elemento entonces te tiene que funciona como esperas (creo, no lo probé, pero debería).

[miriamgomez]

Funciona, pero ajusta tambien el alto y lo necesito solo al ancho

un saludo

[pzin]

Si, cover hace que se ajuste al ancho y alto. Por eso decía, que si la imagen tiene el mismo alto que el elemento entonces funciona como esperas.

Funcionando:



La imagen mide 800 por 200 píxeles. Si redimensiones la ventana del navegador verás que funciona bien.

[miriamgomez]

y habria alguna manera para que redimensionara el ancho, conservando el alto constante?

[pzin]

Iniciado por miriamgomez

y habria alguna manera para que redimensionara el ancho, conservando el alto constante?

Yo veo el alto constante. ¿No?

[miriamgomez]

Si,pero por que el div es de 200,

Pero si el largo del div crece mas alla del 200?

[pzin]

Pero entonces usa cover ¿no?

[miriamgomez]

gracias por tu paciencia¡¡¡

intento de nuevo explicarme:

imaginemos que mi div mide 990 x 450 de alto y la foto de mide 1200 x 200

yo lo que quiero que la foto pase de 1200 a 990, manteniendo el 200 del alto fijo.

si uso el cover, redimensionaria tanto el alto como el ancho, no?

[pzin]

¿Entonces quieres que se deforme la imagen de fondo?

[miriamgomez]

he dado con un pequeño apaño:

background-size:100% 152px;

no se si ira con todos los navegadores...

[JustinKO]

has probado esto?


background-size:100% auto;

lo acabo de probar y creo que funciona como quieres, aunque si te soy sincero el background-size solo lo he usado de vez en cuando para hacer pruebas.

Espero que te sirva

Saludos