Posicionamiento background image

jakijem · #1 (**permalink**) 23/06/2014, 04:33

Hola,

Tengo el siguiente problema: quiero poner una imagen de fondo en body (en realidad varias), pero que la primera siempre se quede alineada a la derecha, tenga la pantalla el ancho que tenga. Bien, hasta aqui el codigo css seria:

Cita:

body {
background: url(../img/imagen.jpg) no-repeat top right,
url(../img/fondo_vertical.jpg) repeat-x,
url(../img/fondo_horizontal.jpg) left repeat-y;

}

Hasta aqui bien,

pero si añado un div de ancho superior a la resolución de mi pantalla (1280), por ejemplo de 2000px:

Cita:

Cita:

#wrapper {
width: 2000px;
height: 2000px;
background-image:url(../img/imagen_transparencias.png);
}

entonces el fondo del body se sigue quedando a la derecha, pero como si la pantalla siguiera manteniendo solo 1280, es decir¡, que me aparece un scroll horizontal, pero la imagen de fondo se queda en medio (alineada a 1280 a la derecha)

No se si me explico. Lo que yo quisiera es que aunque tuviera una resolución de 4000, o un div de 4000 de ancho, la imagen de fondo del body se quede a la derecha del todo (aunque me aparezca el scroll horizontal)

lievanosan · #2 (**permalink**) 23/06/2014, 11:11

Buen día, puedes usar cover para hacer que la imagen se vea en toda la pantalla, tu código quedaría asi para un resultado optimo:

Código HTML:

background: url(../img/imagen.jpg) no-repeat scroll top right / cover rgba(0, 0, 0, 0);

jakijem · #3 (**permalink**) 23/06/2014, 14:34

No, eso lo que hace es agrandar la imagen hasta llenar el alto de los 2000px, pero no es lo que necesito, pero graqias de todos modos

de momento lo he dejado sin poner ningun div, y se queda bien fijo en el sitio,

pzin · #4 (**permalink**) 23/06/2014, 16:05

Curioso, nunca me había fijado. Parece que es sólo cuestión del posicionamiento en si, ya que poniendo un color de fondo lo cubre todo. He hecho alguna prueba, como poner una posición relativa a body y alguna otra cosa extraña pero se queda igual. Primero pensé que sólo medía desde el viewport pero tampoco es eso porque lo forcé a tener el tamaño del elemento pero tampoco funcionaba. Mañana sigo probando a ver qué puede ser.