Problema con imagen de fondo
Hola nuevamente...
Que debo hacer para que no me suceda esto con la imagen de fondo:
http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/fondo-prueba2.html
Como puede ver el fondo se repite o se coloca en mosaico al ver la página a una resolución mayor que 800x600.
Ojala puedas ayudarme..
Espero tu respuesta..
Besitos... Chao.
Que debo hacer para que no me suceda esto con la imagen de fondo:
http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/fondo-prueba2.html
Como puede ver el fondo se repite o se coloca en mosaico al ver la página a una resolución mayor que 800x600.
Ojala puedas ayudarme..
Espero tu respuesta..
Besitos... Chao.
Respuesta de manusoftar
1
Yo te recomendaría hacer una imagen de fondo de 1024 * 768, entonces, cuando visiten el sitio usuarios con menos de esa resolución la van a ver bien (no en mosaico) y lo mismo con usuarios que usen resoluciones de hasta 1024 * 768 (más de eso es muy raro usar).
Otra opción es hacer una imagen de fondo para cada resolución y a través de JavaScript detectar la resolución y cargar la imagen correcta.
Atentamente. Manuel Fernández.
Otra opción es hacer una imagen de fondo para cada resolución y a través de JavaScript detectar la resolución y cargar la imagen correcta.
Atentamente. Manuel Fernández.
Se puede hacer algo así:
En el <head> hacemos esto:
(Supongamos que ya tenemos las imágenes para cada tamaño como chico mediano grande)
<script language="JavaScript">
var h = navigator.screen.height();
var w = navigator.screen.width();
if (h == 480 && w == 640){
imagen = "chica.jpg";
} else if (h == 600 && w == 800){
imagen = "mediana.jpg"
} else {
imagen = "grande.jpg"
}
document.body.backgroud = URL + imagen;
</script>
Nota: donde dice URL habría que poner la dirección de tu sitio, por ejemplo: "http://www.tusitio.com/"
En el <head> hacemos esto:
(Supongamos que ya tenemos las imágenes para cada tamaño como chico mediano grande)
<script language="JavaScript">
var h = navigator.screen.height();
var w = navigator.screen.width();
if (h == 480 && w == 640){
imagen = "chica.jpg";
} else if (h == 600 && w == 800){
imagen = "mediana.jpg"
} else {
imagen = "grande.jpg"
}
document.body.backgroud = URL + imagen;
</script>
Nota: donde dice URL habría que poner la dirección de tu sitio, por ejemplo: "http://www.tusitio.com/"
1 respuesta más de otro experto
Respuesta de gandalf26
1
Dentro de lo que poco que se puede hacer ante esto, las opciones son:
a) Poner una foto que valga para las mayores de las resoluciones.
a.1) Así siempre te aseguras que no hace mosaicos, y en degradados y demás puede quedar bien.
a.2) La imagen puede no quedar bien, según el caso (descentrada, por ejemplo) y puede pesar demasiado al ser muy grande
b) Detectar por javascript la resolución del cliente, y actuar en consecuencia, por ejemplo, enviándole a una version de la página donde se vea bien en su resolución.
b.1) todo el mundo lo ve bien
b.2) Hay que tener varias versiones de la misma página, cambiando solo la imagen de fondo
c) Puedes probar a cambiar dinámicamente la imagen del fondo, con javascript después de detectar la resolución del navegador. No lo he probado nunca, pero lo mismo funciona.
a) Poner una foto que valga para las mayores de las resoluciones.
a.1) Así siempre te aseguras que no hace mosaicos, y en degradados y demás puede quedar bien.
a.2) La imagen puede no quedar bien, según el caso (descentrada, por ejemplo) y puede pesar demasiado al ser muy grande
b) Detectar por javascript la resolución del cliente, y actuar en consecuencia, por ejemplo, enviándole a una version de la página donde se vea bien en su resolución.
b.1) todo el mundo lo ve bien
b.2) Hay que tener varias versiones de la misma página, cambiando solo la imagen de fondo
c) Puedes probar a cambiar dinámicamente la imagen del fondo, con javascript después de detectar la resolución del navegador. No lo he probado nunca, pero lo mismo funciona.
Como seria el script para cambiar dinámicamente la imagen de fondo o cargar la página según la resolución de pantalla..
Espero tu respuesta...
Gracias por tu ayuda...
Besitos... chao..
Espero tu respuesta...
Gracias por tu ayuda...
Besitos... chao..
Agradezco mucho tu ayuda... eres genial. Espero contar contigo en otra ocasión...
Besitos... chao..
Besitos... chao..
Seria algo así:
<body background="IMAGEN1" id="miBody">
...
</body>
la funcion seria:
funcion cambiarImagen(){
document.gelElementById("miBody").setAttribute("background", "nuevaImagen");
}
¿No se si funcionara, lo pruebas, ok?
<body background="IMAGEN1" id="miBody">
...
</body>
la funcion seria:
funcion cambiarImagen(){
document.gelElementById("miBody").setAttribute("background", "nuevaImagen");
}
¿No se si funcionara, lo pruebas, ok?