Foros del Web » Creando para Internet » Diseño web »

Problema con el fondo de mi página

Estas en el tema de Problema con el fondo de mi página en el foro de Diseño web en Foros del Web. Buenas tardes a tod@s. Me encuentro en fase de diseño de un fondo para la primera de mis pantallas de mi página web. El caso ...
  #1 (permalink)  
Antiguo 12/01/2012, 11:36
starlightphp
Invitado
 
Mensajes: n/a
Puntos:
Problema con el fondo de mi página

Buenas tardes a tod@s.
Me encuentro en fase de diseño de un fondo para la primera de mis pantallas de mi página web.
El caso es que sé que cada usuario tiene su propia resolución, así que me he decidido por comprobar cual es la resolución de usuario y utilizar las hojas de CSS correspondientes a esa resolución. Pues bien, sabiendo todo esto, el tema es que tengo que diseñar el fondo y posteriormente incluirlo en mi página.
Aquí surge el problema. De qué dimensión hago mi fondo? porque sé que el usuario si hace scroll down lo va a hacer mas pequeño. Es correcto definirlo en el atributo body? o sería preferible usar un div con dimensión el browser designar el fondo en el div?
Un saludo!
  #2 (permalink)  
Antiguo 12/01/2012, 14:13
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: Problema con el fondo de mi página

puedes hacer que se repita verticalmente y horizontalmente así

body {
background-image: url(urlimagen.jpg);
background-repeat: repeat;
}

o cambiarlo según la resolución utilizando css y js

<script type="text/javascript">
if (screen.width < 1024 ) {document.write('<link rel="stylesheet" type="text/css" href="800.css">');}

else if (screen.width == 1024) {document.write('<link rel="stylesheet" type="text/css" href="1024.css">');}

else if (screen.width >1024 && screen.width <1280 ) {document.write('<link rel="stylesheet" type="text/css"href="1152.css">');}

else if (screen.width = 1280 && screen.height !== 960 ) {document.write('<link rel="stylesheet" type="text/css" href="1280.css">');}

else if (screen.width = 1280 && screen.height == 960 ) {document.write('<link rel="stylesheet" type="text/css" href="1280X960.css">');}

else {document.write('<link rel="stylesheet" type="text/css" href="1024.css">');}

</script>

esto va a cambiar el archivo css
en el primer caso si el ancho la resolución es menor a 1024
en el segundo si el ancho es igual a 1024
en el tercero si el ancho es mayor a 1024 y menor que 1280
en el cuarto si el ancho es 1280 y el alto 960
y el ultimo si no es ninguno de los anteriores

puedes cambiar los valores como quieras
si no entiendes algo pregunta y tratare de responderte
  #3 (permalink)  
Antiguo 12/01/2012, 14:38
starlightphp
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema con el fondo de mi página

muchas gracias por tu respuesta madhatterdef =). Realmente todo ese código ya lo tenía, lo que no sabía era si diseñar una imagen con cada tamaño y luego duplicar o crear una super imagen gigante =).
Voy a hacer una imagen por cada resolución y luego repito!
Muchas gracias!
  #4 (permalink)  
Antiguo 12/01/2012, 18:35
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: Problema con el fondo de mi página

Hola
Fijate esto de fondo elastico no deformable

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 12/01/2012, 18:40
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: Problema con el fondo de mi página

de nada
si es una imagen compuesta usa varias pero si es de un solo color o un degrade usa lo primero
  #6 (permalink)  
Antiguo 12/01/2012, 19:00
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: Problema con el fondo de mi página

C2am
ahora que lo veo
cual seria la diferencia entre eso y esto

background-image: url(urlimgen.jpg);
background-size: 60%;

Etiquetas: background-image, imgen
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




La zona horaria es GMT -6. Ahora son las 18:17.