Foros del Web » Creando para Internet » CSS »

ajuste de tamaño de la imagen de fondo

Estas en el tema de ajuste de tamaño de la imagen de fondo en el foro de CSS en Foros del Web. Hola amigos del foro soy nuevo en esto así que por favor respondan ampliamente si tienen tiempo, el problema es el siguiente: #menu { position: ...
  #1 (permalink)  
Antiguo 21/11/2005, 09:44
 
Fecha de Ingreso: julio-2005
Mensajes: 36
Antigüedad: 12 años, 4 meses
Puntos: 0
ajuste de tamaño de la imagen de fondo

Hola amigos del foro soy nuevo en esto así que por favor respondan ampliamente si tienen tiempo, el problema es el siguiente:

#menu {
position: absolute;
left: 0em;
top: 0em;
width: 12.5em;
height: auto;
background: url(fondo1.jpg) no-repeat;
padding: 0.7em 0 0 0.7em;
border: none;
margin: none;
text-transform: capitalize;
font-weight: bold;
}

si el ancho de fondo1.jpg es mayor la imagen se visualiza cortada y si es menor la imagen se muestra muy pequeña en el tamaño. como puedo hacer que se visualice entera en el div que usa esta almohadilla.
  #2 (permalink)  
Antiguo 21/11/2005, 10:12
 
Fecha de Ingreso: noviembre-2005
Mensajes: 21
Antigüedad: 12 años
Puntos: 0
No entiendo a que te refieres con que la imagen se muestra muy pequeña, auqnue por ahora lo unico que veo mal es que la imagen deberias ponerla con "background-image" y no con "background". Si puedes explicar mejor que necesitas me sera mas facil dar una respuesta.

Saludos!
  #3 (permalink)  
Antiguo 21/11/2005, 16:50
 
Fecha de Ingreso: julio-2005
Mensajes: 36
Antigüedad: 12 años, 4 meses
Puntos: 0
lo que pasa es que si el ancho predterminado para el div es como lo indica en #menu: width 12.5em; que es lo mismo que 200px de ancho; ahora bien si la imagen tiene 150px de ancho no cubre todo el fondo de la caja como hago para que cubra todo el ancho esto sin redimensionar la imagen o en caso contrario si el ancho es mayor que la imagen se muestre completa y no como cortada.
  #4 (permalink)  
Antiguo 21/11/2005, 18:03
Avatar de marioStudios
Colaborador
 
Fecha de Ingreso: octubre-2005
Ubicación: Chiapas; México.
Mensajes: 1.625
Antigüedad: 12 años, 1 mes
Puntos: 211
Prueba de esta forma

Cita:
Iniciado por franz_fqm
Hola amigos del foro soy nuevo en esto así que por favor respondan ampliamente si tienen tiempo, el problema es el siguiente:

#menu {
position: absolute;
left: 0em;
top: 0em;
width: 12.5em;
height: auto;
background: url(fondo1.jpg) no-repeat;
padding: 0.7em 0 0 0.7em;
border: none;
margin: none;
text-transform: capitalize;
font-weight: bold;
}

si el ancho de fondo1.jpg es mayor la imagen se visualiza cortada y si es menor la imagen se muestra muy pequeña en el tamaño. como puedo hacer que se visualice entera en el div que usa esta almohadilla.

No uses Pixeles Usa Porcentajes!!! Suerte.
  #5 (permalink)  
Antiguo 21/11/2005, 18:53
 
Fecha de Ingreso: julio-2005
Mensajes: 36
Antigüedad: 12 años, 4 meses
Puntos: 0
h eusado porcentajes pero sigue sin funcionar alguna otra idea? por favor es urgente!!!!!Gracias por su comprension.

Nota.- todas las sugerencias las probare, asi que opinen con confianza.
  #6 (permalink)  
Antiguo 21/11/2005, 20:42
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Las imagenes en background no se "redimensionan", o usas un tamaño o usas el otro, o puedes buscar una respuesta diferente para lo que buscas, porque no nos dices concretamente para que quieres que se "redimensione" tu background, si sólo es eso, una imagen de fondo, no es algo enfatizable.

Espero entiendas mi opinión.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #7 (permalink)  
Antiguo 22/11/2005, 05:29
 
Fecha de Ingreso: noviembre-2005
Mensajes: 21
Antigüedad: 12 años
Puntos: 0
Cita:
Iniciado por franz_fqm
h eusado porcentajes pero sigue sin funcionar alguna otra idea? por favor es urgente!!!!!Gracias por su comprension.

Nota.- todas las sugerencias las probare, asi que opinen con confianza.

O sea... tienes una imagen que mide 120 pixels, un div de 200 pixels, quieres que la imagen ocupe 200 pixels pero que aun mida 120 pixels? pues lo unico que se me ocurre para que eso suceda es que se repita

background-repeat:repeat-x;

Y mariostudios, el uso de pixels o porcentajes depende del uso que vaya a darsele. A veces necesitas usar pixels y a veces necesitas porcentajes.

Saludos!
  #8 (permalink)  
Antiguo 22/11/2005, 08:28
 
Fecha de Ingreso: julio-2005
Mensajes: 36
Antigüedad: 12 años, 4 meses
Puntos: 0
gracias a yogiri pero la idea(me explicop un poco mejor) es parecida a los atributos de <img src="una imagen" heigth="alto" width="ancho"> ya que esto cualquier imagen de un tamaño dado se estira a las proporciones definidas para la imagen. Esto es lo que quiero hacer ya que el div tiene una dimension de un ancho por un alto pero la imagen de fondo puede ser mayor o menor y lo que quiero es que se ajuste o estire en cualquiera de los casos.

no olviden que el div tiene como fondo una imagen es decir: background-image: url(mi_imagen.jpg); o background:url(mi_imagen.jpg); alguna sugerencia estare atento a sus posibles consejos y de antemano les avisare si funciona.Gracias!!!! es Urgente!!!!!!!!!!!!!!!!!!!!!!!
  #9 (permalink)  
Antiguo 22/11/2005, 09:35
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Bueno si eso es lo que quires, puedes usar una capa con una imagen en png que no se deforme mucho al achicarla y ponerle las dimensiones en porcentajes y sobre esta hacer OTRA CAPA con el contenido. (aunque insisto que debes plantearte tu problema desde otro punto de vista )

Porqué es tan importante ese background? o muéstranos la página para darte ideas. o usa un fondo tramado o colorido y encima una imagen png32 transparente o semi transparente, solo piénsalo te estás estancando en un problema habiendo muchas soluciones.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #10 (permalink)  
Antiguo 22/11/2005, 09:57
 
Fecha de Ingreso: julio-2005
Mensajes: 36
Antigüedad: 12 años, 4 meses
Puntos: 0
Gracias Baccxus por tus consejos, y la verdad es que este problema segun la literatura y bibliografia leida no se puede resolver con la propiedad background por que el fondo no tiene otros parametros para hacer lo que se pide ahora bien encontre una manera de que la imagen permanezca inmovil es decir fija con (background-attachment: fixed;) pero el defectoes que no se aplica a elentos definidos solo al body y no asi pra un div, gracias y si alguien tiene otro valioso consejo estamos dispuestos a aprender y ver el problema de otra manera distinta. Gracias!!
  #11 (permalink)  
Antiguo 22/11/2005, 10:19
 
Fecha de Ingreso: julio-2005
Mensajes: 36
Antigüedad: 12 años, 4 meses
Puntos: 0
Me olvidaba aqui les dejo las direccion para que puedan ver la pagina y asi me puedan ayudar a que esa imagen ocupe todo el espacio hasta donde terminan los enlaces del menu, todos los estilos estan definidos dentro del documento.
(la imagen redondeada de fondo color gris oscuro se extire hasta todo el documento o por lo menos hasta todo el espacio definido por el div que es lo que se ve)

ver http://galeon.com/franzfqm/menu.html
  #12 (permalink)  
Antiguo 22/11/2005, 10:53
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Fíjate si te sirve

Lo único malo de esta opción es que anida 3 divisiones:

http://www.geocities.com/baccxus/franz_fqm.html

Saludos,
__________________
Al final del día hablar es gratis, codificar no lo es
  #13 (permalink)  
Antiguo 23/11/2005, 10:01
 
Fecha de Ingreso: julio-2005
Mensajes: 36
Antigüedad: 12 años, 4 meses
Puntos: 0
Ya lo sabia otra sugerencia(las pruebo todas)

hola que tal baccxus eso de maquetar con tres imagenes ya lo sabia incluso lo hago hasta para el ancho cortando en cuatro pedazo una imagen grande redondeada(corto el la esquina superior derecha, la esquina inferior derecha,la esquina inferior izquierda hasta justo el borde del corte de la esquina inferior derecha antes cortada y la esquina superior izquierda con todo el cuerpo hasta los bordes de las anteriores partes cortadas) y estos se mezaclan en 4 divs los cuales hacen un borde redondeado ajustable a cualquier texto; pero estoy haciendo que en mi web puedan cambiarla de forma es decir solo se permite subir una imagen para el fondo, esta deberia estirarse hasta completar el cuadro, si lo hago de tu forma o la mía algunos usuarios no podrian cortar las imagenes o en todo caso las esquinas redondeadas podrian ser muy redondas en cuanto a la curva o menos redondas o pequeñas en cuanto a su curva lo cual complicaria el funcionamiento del menu y por ende se complicarian mucho para cambiar la apariencia del menu puesto que el menu tambien es cambiante en cuanto a su ancho y alto es decir width:auto y heigth:auto de modo que las opciones del menu pueden ser largas y tambien pueden ser muchas.

Gracias por tu consejo no esta demas pero si encuentras alguna forma me avisas
hasta la proxima
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 04:31.