Problema con imagen de fondo

[oliverarthurnardi]

Hola buenas !!!

A ver si alguien de por aqui me puede echar una mano con una imagen de fondo que tengo en mi web!! Bueno para empezar la imagen de fondo me mide 1280 x 753 pero la tengo programada para que se adapte a cualquier resolución de pantalla!!! El problema está es que cuando pongo objetos (unos imagenes que he creando en el photoshop) estos objetos cuando hago la pantalla mas pequeña se me mueven y me rompen todo el diseño de la web y me bueno ya no se como hacer para evita eso.

ejemplo1:



Esto es lo que me pasa cuando ago la reducción de pantalla:

[ArturoGallegos]

si has colocado que se adapte me estoy imaginando que se deforma y esta también te delimita o marca cada una de las secciones, si este es el caso deberás reconsiderar modificar tu diseño o la forma en que estas maquetando...

sin ver tu sitio es difícil decirte que es lo que tienes que cambiar

[DrFaust]

Las imágenes no se ven. Subilas a tinypic.com o similar.

Además, necesitamos como mínimo un copypaste del código de tu web. O, idealmente, un link a la página web funcionando.

[oliverarthurnardi]

aqui esta la imagen normal!! los marcos los tengo en div con posición relative y lo otro es imagen de fondo.

[IMG][/IMG]

y aqui esta la imagen con a ventana del internet reducida

[IMG][/IMG]

[oliverarthurnardi]

Y aqui está el css de la web

Código HTML:

<style type="text/css">
body{
  background: url(imagenes/wallpaper.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-bottom: 0px;
}
#Container{
    position: relative;
    width:1280px;
    height:1010px;
    margin: 0px auto 0px auto;
    margin-top:0 auto;
    margin-bottom:350px;
}
#contenido{
    position:relative;
    width:1050px;
    height:650px;
    margin: 0px auto 0px auto;
    margin-top:0 auto;
    }
#frame{
    position: relative;
    width:233px;
    height:173px;
    background-color:transparent;
    margin-left: 615px;
    margin-right: 800px;
    margin-top: 67px;
    margin-bottom:850px;
}
#frame1{
    position:relative;
    width:360px;
    height:268px;
    background-color:transparent;
    margin-left: 221px;
    top: 28px;
}
#frame2{
    position:relative;
    width:242px;
    height:180px;
    background-color:transparent;
    left: 352px;
    top: 316px;
}
#frame3{
    position:relative;
    width:138px;
    height:184px;
    background-color:transparent;
    left: 645px;
    top: 257px;
}
#frame4{
    position:relative;
    width:181px;
    height:157px;
    background-color:transparent;
    left: 799px;
    top: 268px;
}
#frame5{
    position:relative;
    width:62px;
    height:282px;
    background-color:transparent;
    left: 156px;
    top: 332px;
}
</style>
 

[emprear]

Por lo que entiendo, tu imagen de fondo sirve como referencia para la ubicación de los marcos, y a su vez estás pasando de 1024 a 1280 a 1440 y más, y solo por mencionar algunas resoluciones estandar.
Sin un css por cada tipo de resolución, y distintos tamaños en las imágenes, me parece poco menos que imposible.
Tal vez te simplifique las cosas ubicar los marcos hacia la izquierda de la imágen. Tus marcos ocupan en conjunto unos 650px de ancho de manera que si los ubicas con un margin left no mayor a 300(a partir el primero, Oliver...), el esquema se va a mantener.

saludos

[IsaBelM]

creo que no se refiere a que tenga problemas con distintas resoluciones, sin al restaurar la página. perece que ha dado fuerte eso ahora

[emprear]

Iniciado por oliverarthurnardi

una imagen de fondo que tengo en mi web!! Bueno para empezar la imagen de fondo me mide 1280 x 753 pero la tengo programada para que se adapte a cualquier resolución de pantalla!!!

Eso me suena a que al redimemensionar el background, las imágenes de los marcos, que no se redimensionan, pierden su ubicación

Si se observan las dos capturas, se aprecia que al chicarse el background por la resolución menor, uno de los cuadros se sobrepone con el piloto que esta colgando del perchero. Si empieza desde la izquierda, la cosa se mantiene bien, en cuant al alto, mientras los cuadros se acerque n a la mesa, pero quede un espacio suficiente, el efecto sigue siendo bueno
Saludos

[oliverarthurnardi]

Hola buenas empear!

me recomiendas que haga un float hacia la izquierda o si no que ubique los marcos a la izquierda y a partir de ahí le voy aplicando un margin left con unos 300px aproximados?

[oliverarthurnardi]

porque a ver yo con la imagen de fondo no tengo problema de resolución!! también he probado de meter la imagen de fondo en una div y luego crear una div contenedora y dentro de la divs contenedora meter los marcos... pero me pasa el mismo problema de que cuando hago la venta del internet mas pequeña , la div contenedora se me mueve de lugar con todos los marcos como me pasa en la captura que he puesto como ejemplo

[emprear]

A ver, esto es fácil de decir pero dificil de explicar, fijate tus dos capturas, con la resolucion mayor y la mas chica, si los cuadros estuviesen más sobre el sillón, y el telefono más alto, la cosa quedaria mejor, incluso una vez hecho esto, podés correr a la izquierda un poco el perchero, que según entiendo foema parte del background, para que el conjunto quede más equilibrado. Cuando hacés este tipo de webs y tu audiencia es general, lo primero es pensar en las resoluciones menores, notebooks, netbooks, ni que hablar.
Espero haberme explicado

Saludos

[oliverarthurnardi]

Si el colgador es parte del fondo! Bueno creo entender lo que me dices.... voy hacer pruebas sobre esto y si va bien ya os comento

Un saludo