Foros del Web » Creando para Internet » CSS »

Problema con background en diferentes resoluciones de pantalla

 Estas en el tema de Problema con background en diferentes resoluciones de pantalla en el foro de CSS en Foros del Web. Hola, estoy teniendo problemas con el fondo de mi aplicacion web, que en diferente resoluciones de pantalla el fondo no se ve completo (ya que ...
  #1 (permalink)  
Antiguo 04/08/2014, 07:34
 
Fecha de Ingreso: junio-2014
Mensajes: 36
Antigüedad: 9 años, 10 meses
Puntos: 0
Exclamación Problema con background en diferentes resoluciones de pantalla
Hola, estoy teniendo problemas con el fondo de mi aplicacion web, que en diferente resoluciones de pantalla el fondo no se ve completo (ya que la otra pantalla es de mayor resolucion).

Me explico, mi resolucion es de 1366x700, y trabaje con el tamaño de la imagen de fondo con esas especificaciones, pero ahora que entro de otra pc con una resolucion mayor se me ve el fondo y el resto de la pantalla en blanco, obviamente se que tendria que cambiarle esas especificaciones, pero entoncs dejaria de verse bien aqui, como hago para que se vea bien en cualquier resolucion?!

Coloco el width porque no quiero que se me mueva el form cuando reduzco la pantalla.

Probe con cover, pero con el width practicamente no me funciona, y necesito ese width para que no se me mueva el form.

A continuacion les coloco mi codigo:

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Sistema</title>
  5.         <style type="text/css">
  6.             html {  width: 1365px; }
  7.             body {  background:url(webb.jpg)no-repeat;
  8.                     background-attachment: local;
  9.                     background-position: right top;
  10.                     background-size: 1365px 600px;
  11.                     -moz-background-size: 1365px 600px;
  12.                     -webkit-background-size: 1400px 700px;;
  13.                     -o-background-size: cover;
  14.                     }
  15.             form {  position: static;
  16.                     margin-top:315px;
  17.                     margin-right: 640px;
  18.                     margin-left:400px;
  19.                     text-align: right;
  20.                     font-family: sans-serif;
  21.                     font-size:15px;
  22.                    }
  23.     </style>
  24.     </head>
  25.     <body>
  26.         <form name="formLogin" method="post" action="login.jsp" >
  27.             <label for="nickname"> Nombre de Usuario:  </label>
  28.                 <input type="text" name="nickname" id="nickname" maxlength="15"/> <br/>
  29.             <label for="contrasena"> Contrase&ntildea:  </label>
  30.                 <input type="password" name="contrasena" id="contrasena" maxlength="15"/> <br/>
  31.             
  32.             <input type="submit" name="Ingresar" value="Ingresar" /> 
  33.  
  34.         </form>
  35.  
  36.     </body>
  37. </html>

Espero que puedan ayudarme.
  #2 (permalink)  
Antiguo 04/08/2014, 10:08
 
Fecha de Ingreso: septiembre-2009
Ubicación: Wheel of Time
Mensajes: 30
Antigüedad: 14 años, 7 meses
Puntos: 0
Respuesta: Problema con background en diferentes resoluciones de pantalla
No se te entiende muy bien, pon las rutas enteras hacía los fondos para que podamos visualizar el todo tal y como es y reproducir el fallo.
  #3 (permalink)  
Antiguo 04/08/2014, 12:00
 
Fecha de Ingreso: junio-2014
Mensajes: 36
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Problema con background en diferentes resoluciones de pantalla
Que no se entiende? la imagen es personalizada la tengo en la misma carpeta de los codigos no puedo subirla aqui
  #4 (permalink)  
Antiguo 04/08/2014, 15:52
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 11 años
Puntos: 31
Respuesta: Problema con background en diferentes resoluciones de pantalla
Si tienes definido que el fondo sea de una medida determinada y que no se repita, ese va a ser el resultado
Cita:
Probe con cover, pero con el width practicamente no me funciona, y necesito ese width para que no se me mueva el form.
No entiendo muy bien lo que quieres decir.
  #5 (permalink)  
Antiguo 04/08/2014, 21:28
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 9 años, 9 meses
Puntos: 26
Respuesta: Problema con background en diferentes resoluciones de pantalla
Como bien dice alzacon, si definiste un ancho en tu documento ese será el resultado.
En tus estilos tienes

Código CSS: 
Ver original
  1. html { width:1365px; }

Y más abajo en body igual tienes background-size: 1365px 600px; lo cual te esta ocacionando estos problemas, elimina lo de html{ width:1365px; } y en body background-size utiliza cover en lugar de la resolución de tu pantalla.

Quedando de la siguiente forma
Código CSS: 
Ver original
  1. body {
  2.   background:url(webb.jpg)no-repeat;
  3.   background-attachment: local;
  4.   background-position: right top;
  5.   background-size: cover;
  6.   -moz-background-size: cover;
  7.   -webkit-background-size: cover;
  8.   -o-background-size: cover;
  9. }
  10. form {
  11.   position: static;
  12.   margin-top:315px;
  13.   margin-right: 640px;
  14.   margin-left:400px;
  15.   text-align: right;
  16.   font-family: sans-serif;
  17.   font-size:15px;
  18. }

Espero te funcione, Saludos!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #6 (permalink)  
Antiguo 05/08/2014, 07:12
 
Fecha de Ingreso: junio-2014
Mensajes: 36
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Problema con background en diferentes resoluciones de pantalla
Cita:
Iniciado por DesgraciadoGabo Ver Mensaje
Como bien dice alzacon, si definiste un ancho en tu documento ese será el resultado.
En tus estilos tienes

Código CSS: 
Ver original
  1. html { width:1365px; }

Y más abajo en body igual tienes background-size: 1365px 600px; lo cual te esta ocacionando estos problemas, elimina lo de html{ width:1365px; } y en body background-size utiliza cover en lugar de la resolución de tu pantalla.

Quedando de la siguiente forma
Código CSS: 
Ver original
  1. body {
  2.   background:url(webb.jpg)no-repeat;
  3.   background-attachment: local;
  4.   background-position: right top;
  5.   background-size: cover;
  6.   -moz-background-size: cover;
  7.   -webkit-background-size: cover;
  8.   -o-background-size: cover;
  9. }
  10. form {
  11.   position: static;
  12.   margin-top:315px;
  13.   margin-right: 640px;
  14.   margin-left:400px;
  15.   text-align: right;
  16.   font-family: sans-serif;
  17.   font-size:15px;
  18. }

Espero te funcione, Saludos!
El problema con utilizar cover son 2. El primero que cuando tengo la ventana en el tamaño mas grande el fondo se me ve muy expandido. Y el segundo que cuando reduzco la ventana el formulario (form) se me mueve, y eso es debido a que no le coloque una anchura fija a la web, es decir porque quite el width.
  #7 (permalink)  
Antiguo 05/08/2014, 10:16
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Problema con background en diferentes resoluciones de pantalla
El formulario dudo mucho que se mueva. Tal vez a lo que llames movimiento sea precisamente una cuestión de quietud.

Luego lo que está mal es la colocación del formulario, que está muy hardcoded. Colocarlo anchos fijos a html o a body son generalmente ideas muy malas.
  #8 (permalink)  
Antiguo 05/08/2014, 11:22
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 9 años, 9 meses
Puntos: 26
Respuesta: Problema con background en diferentes resoluciones de pantalla
Nuevamente le doy la completa razón a pzin, no debes diseñar un sitio con respecto a tu resolución, eso te generará muchos problemas, existen demasiadas resoluciones.
Te recomiendo lo manejes de la siguiente forma:
Código CSS: 
Ver original
  1. body {
  2.       background:url(webb.jpg)no-repeat;
  3.       background-attachment: local;
  4.       background-position: right top;
  5.       background-size: cover;
  6.       -moz-background-size: cover;
  7.       -webkit-background-size: cover;
  8.       -o-background-size: cover;
  9.     }
  10.     form {
  11.       display:block;
  12.       width:300px;
  13.       height:80px;
  14.       position: absolute;
  15.       top:calc(50% - 40px);
  16.       left:calc(50% - 150px);
  17.       text-align: right;
  18.       font-family: sans-serif;
  19.       font-size:15px;
  20.     }

El tema de la imagen de fondo, pues bueno, si la descargaste de internet puedes buscar una de mayor tamaño, si la diseñaste puedes volverla a hacer, recomiendo una de 1400 o hasta de 2000 pixeles guardala en un jpg de media calidad para que no sea tan pesada y en dado caso piensa en que tan necesario es ese fondo, sino lo es eliminalo a la ching...

Si te interesa, busca acerca de CALC() para css es muy buena opción, segun pienso quisiste centrar el formulario y es lo que hice en ese ejemplo.

Espero te funcione, Saludos
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #9 (permalink)  
Antiguo 06/08/2014, 12:21
 
Fecha de Ingreso: junio-2014
Mensajes: 36
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Problema con background en diferentes resoluciones de pantalla
Cita:
Iniciado por DesgraciadoGabo Ver Mensaje
Nuevamente le doy la completa razón a pzin, no debes diseñar un sitio con respecto a tu resolución, eso te generará muchos problemas, existen demasiadas resoluciones.
Te recomiendo lo manejes de la siguiente forma:

El tema de la imagen de fondo, pues bueno, si la descargaste de internet puedes buscar una de mayor tamaño, si la diseñaste puedes volverla a hacer, recomiendo una de 1400 o hasta de 2000 pixeles guardala en un jpg de media calidad para que no sea tan pesada y en dado caso piensa en que tan necesario es ese fondo, sino lo es eliminalo a la ching...

Si te interesa, busca acerca de CALC() para css es muy buena opción, segun pienso quisiste centrar el formulario y es lo que hice en ese ejemplo.

Espero te funcione, Saludos
Bueno en lo que respecta al form, cuando decia que se me movia era cuestion de quietitud como dijo pzin. Muchas gracias por ayudarme con esa parte, y por mostrarme lo de calc() no sabia que se podia hacer algo asi, y pues ahora puedo centrar mucho mejor, y aparte no se descuadra.

Con respecto a la imagen de fondo, fue una diseñada por una amiga especialmente para la aplicación web que estoy realizado, la dimension es de 3302 x 2533 px, no se si tendria que hacerlo de un tamaño menor para que no se me veia expandida en el cover cuando tenga la ventana en su mayor tamaño. O que otra cosa podria hacer para que se vea bien con cover?

Etiquetas: background, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:42.