Imagen de fondo

[ezeqpo]

Buenas, estoy queriendo poner una imagen de fondo que ocupe todo el tamaño de la pantalla y que al agrandar la pantalla del navegador hacia la derecha (suponiendo que en altura en la pantalla ya esta agrandada al máximo) esta acompañe el tamaño de la pantalla.

Les dejo un ejemplo con esta web:www.jellyjamm.com

Yo quiero lograr lo mismo. Si ven, la imagen de fondo se redimensiona pero solo en ancho, no en alto, y además al redimensionarse no se deforma. Y el menú del lateral izquierdo y la imagen central acompañan ese movimiento hacia la derecha que se hace al agrandar la pantalla del navegador.

Me gustaría lograr lo mismo, pero tengo 2 problemas:
1. Cuando uso una imagen de fondo esta se redimensiona tanto en ancho como en alto, y no se como hacer para que el alto quede tal cual ocupando toda la pantalla y se agrande hacia la derecha sin deformarse.

2. Que el menú lateral acompañe el movimiento hacia la derecha al cambiar el tamaño del navegador.

Hasta ahora no logré ninguna de esas dos cosas. Alguien me puede ayudar un poco? No se como será que está hecha esa página que dejé como ejemplo para que vieran, pero sería ideal lograr el efecto similar que hace la imagen de fondo al agrandar la pantalla.
La idea es que la web que estoy armando no tenga scroll, sino que sea de un alto específico.
Que tamaño debería tener la imagen de fondo que voy a usar? Y donde irií colocada? en el body?

Gracias!

[ArturoGallegos]

la imagen del sitio no se redimenciona, si observas bien solo es una imagen grande, en pantallas pequeñas solo se ve un espacio limitado y al hacer la ventana mas grande se muestra parte de lo que quedaba oculto.

para esto solo necesitas una imagen grande, preferentemente de 1920x1080 para que no tengas problemas en pantallas grandes o bien una imagen que se pueda repetir hacia los lados al menos.

la colocas como fondo con

Código CSS:

body{background:#fff url(imagen.jpg) top center;}
 

la otra si no te importa que se deforme es incrustarla directamente en el body

Código HTML:

<img src="" style="width:100%;height:100%;" />
 

[ezeqpo]

Gracias Arturo, probaré lo que me decis a ver que tal va.

[ezeqpo]

Bien, he probado con una imagen de 1680x1050 y va bien. También probé con otra imagen de 1920x1080 y queda bien también.
En ambos casos coloqué la imagen en el CSS en el body poniendo:

Código CSS:

body {
  background: url (imagen.png);
  background-position:center;
}
 

La duda que me queda es la siguiente:

en la web que dejé como ejemplo antes, (www.jellyjamm.com)la imagen de fondo, si la vemos detenidamente al achicar la pantalla del navegador, es como que se va corriendo pero hasta cierto punto (casi hasta la mitad de la pantalla mas o menos) y al seguir achicando la pantalla ya no se corre más hacia la izq. Si toman como referencia la forma verde mas grande del fondo lo pueden notar.

En mi caso, en mi web, la imagen se corre hacia la izq hasta que no puedo achicar mas la pantalla, incluso pasando más de la mitad de la pantalla la imagen se sigue corriendo hacia el lado izq.
Hay manera de controlar eso y que hasta cierto punto deje de correrse la imagen de fondo? O eso depende de la resolución de la pantalla en la que lo esté viendo y de la resolución de la imagen de fondo?

Gracias!

[ArturoGallegos]

deja de repetir la imagen para que no se muestre nada a los lados de la imagen si esta es mas pequeña del espacio disponible.

[ezeqpo]

Es que la imagen no se repite, la imagen se ve completa (o casi) siempre y en cualquier pantalla donde yo la vea.

El tema es cuando achico la pantalla del navegador, ahi es cuando la imagen como que se va corriendo hacia la izquierda. Pero repetirse no se repite nunca.

[pzin]

En la web que mencionas, la imagen no es el fondo de body sino de otro elemento, .wrapper_container y ese tiene otra clase que hace que tenga una anchura mínima, 920px creo que vi, y por eso en algún momento para de centrarse al hacer más pequeña la ventana.

[ezeqpo]

Bien, aunque estoy todavía con problemas... si la imagen de fondo no está en el body entonces como esta puesta?

Sigo sin poder hacer que la imagen no se redimensione o estire al agrandar la pantalla, tanto en ancho como en alto.

[Zeromm]

tu quieres algo así? http://codepen.io/zeromm/pen/qEgoF

[fersosa]

todo tu contenido debe estar dentro de un div general. de esta manera sucederá lo que quieres.