Foros del Web » Creando para Internet » CSS »

background-image, backround-size - no funciona bien

Estas en el tema de background-image, backround-size - no funciona bien en el foro de CSS en Foros del Web. Buenas. Creo que es el subforo adecuado. Tengo un problema con backround-size y es que parece que no afecta a la imagen... Este es el ...
  #1 (permalink)  
Antiguo 23/07/2010, 07:09
 
Fecha de Ingreso: marzo-2009
Mensajes: 39
Antigüedad: 15 años
Puntos: 1
background-image, backround-size - no funciona bien

Buenas. Creo que es el subforo adecuado.

Tengo un problema con backround-size y es que parece que no afecta a la imagen...

Este es el trozo de código del fichero de estilos:
Código HTML:
span.thumb_p{ height: 100px; display: block; width: 100%; 
background-position: bottom center; background-repeat: no-repeat;
background-image: url( images/imagen.jpg ); background-size: 50px 25px }
La verdad es que tenia que especificar un tamaño para la imagen y las otras cosas que he probado no dan el resultado deseado.

Ideas?

Gracias
  #2 (permalink)  
Antiguo 23/07/2010, 09:05
 
Fecha de Ingreso: diciembre-2003
Mensajes: 204
Antigüedad: 20 años, 3 meses
Puntos: 2
Respuesta: background-image, backround-size - no funciona bien

Buenas LLap. Danos más pistas, que navegador estas usando? supongo que sabes, que esa propiedad ha sido introducida en css3, con lo cual solo funcionara en navegadores que lo soporten.

Para navegador específico tienes

-o-background-size
-webkit-background-size
-khtml-background-size
-moz-background-size
  #3 (permalink)  
Antiguo 23/07/2010, 09:56
 
Fecha de Ingreso: marzo-2009
Mensajes: 39
Antigüedad: 15 años
Puntos: 1
Respuesta: background-image, backround-size - no funciona bien

mmm, entiendo.
He estado mirando y lo he conseguido ver bien en Firefox [-moz-background-size] (que es uno de los que tenia a mano).

El problema es que veo que IE aún no soporta nada de esto y como tengo que hacerlo lo más compatible con todo dentro de lo posible pues creo que no me va a servir este método.

Voy a explicar lo que pretendo.

Partimos de esto:

Código HTML:
<a class="clicka" href="url.en.cuestion.com" title="Titulo"> 
<span class="thumb_p" style="background-image: url(' images/imagen.jpg ' )" >
 &nbsp; </span>Descripción</a> 
Donde el estilo "clicka" esta definido así:
Código HTML:
*.clicka{ color: black; display: block; padding: .5em; 
border-bottom: 1px solid #FFFFFF; margin: 0; cursor: pointer }
y el "thumb_p" así:

Código HTML:
span.thumb_p{ height: 120px; display: block; width: 100%; 
background-position: bottom center; background-repeat: no-repeat }
Pues bien el problema es que necesito especificar un tamaño concreto para la imagen "background_image", pero ya que parece que IE no lo soporta como he comentado arriba, pues se me ha ocurrido poner la imagen no como background sino normal así:

Código HTML:
<a class="clicka" href="url.en.cuestion.com" title="Titulo"> 
<span class="thumb_p" > &nbsp; 
<img src="images/imagen.jpg" width="50" height="25"> </span> Descripción</a> 
Pues bien, se muestra correctamente, pero me aparece otro problema con IE ( los otros navegadores van bien) y es que al hacer click a la imagen no sigue la URL, tengo que hacer click en el texto "descripción" sino no hace nada...

Gracias por cualquier idea
  #4 (permalink)  
Antiguo 23/07/2010, 10:34
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: background-image, backround-size - no funciona bien

si pretendes que la imagen siempre tenga el mismo tamaño, porque no solo la abres con un editor de imágenes y la redimencionas al tamaño deseado de esa forma no es necesario especificar el tamaño de la imagen.

aparte siempre es mucho mejor usar las imágenes del tamaño que se necesitan y no estar redimencionando directamente con el html o css.
  #5 (permalink)  
Antiguo 23/07/2010, 10:46
 
Fecha de Ingreso: marzo-2009
Mensajes: 39
Antigüedad: 15 años
Puntos: 1
Respuesta: background-image, backround-size - no funciona bien

Cita:
Iniciado por Ag666 Ver Mensaje
si pretendes que la imagen siempre tenga el mismo tamaño, porque no solo la abres con un editor de imágenes y la redimencionas al tamaño deseado de esa forma no es necesario especificar el tamaño de la imagen.

aparte siempre es mucho mejor usar las imágenes del tamaño que se necesitan y no estar redimencionando directamente con el html o css.
Bueno en realidad esto es solo un ejemplo. La imagen tiene un máximo de altura y anchura. (para que no sobresalga de su espacio).

De hecho antes hacia lo que comentas con funciones PHP, pero me surge un problema y es que tengo que hacer lo mismo desde javascript y claro, no puedo llamar a una función php desde allí...

No se si me explico. Algo más detallado:
- Cuando carga la pagina principal se generan X imágenes en sus recuadros pero luego entran en juego una serie de scripts que cada 10 segundos cambian estas imágenes por otras (entre otras cosas)
  #6 (permalink)  
Antiguo 23/07/2010, 10:57
 
Fecha de Ingreso: diciembre-2003
Mensajes: 204
Antigüedad: 20 años, 3 meses
Puntos: 2
Respuesta: background-image, backround-size - no funciona bien

Bueno, ahora estamos en otro punto diferente.
Si quieres cambiar las imágenes de tamaño en "tiempo real" con javascript lo tienes facil.

por ejemplo, con jquery, y suponiendo esto
Código:
<img id="imagen" src="rutaDeMiImagen.jpg" />
tendriamos, por ejemplo
Código:
$("#imagen").css('width',300);
o le puedes mandar directamente un array con la anchura y altura, o en vez de cambiar el css directamente con jquery puedes cambiar los atributos height y width....

Mira a ver si te sirve.
  #7 (permalink)  
Antiguo 02/08/2010, 11:03
 
Fecha de Ingreso: marzo-2009
Mensajes: 39
Antigüedad: 15 años
Puntos: 1
Respuesta: background-image, backround-size - no funciona bien

Hola de nuevo. Perdón por tardar en responder pero estoy que no me lo atrapo xD

Lo que comentas DaChux puede ser interesante aunque no se si se notaria mas lenta la web.
Aún así no he sabido aplicarlo para probar ya que de javascript no se casi nada (lo mínimo) y con las indicaciones que me has dado no se como empezar.

Había intentado algo, pero muchas imágenes no se si no cargaban a tiempo o que pasaba pero la función tamaño me devolvía 0, 0 y claro no se mostraban:

Código:
var i = new Image();
	i.src = source;
	var w =i.width;
	var h = i.height;
	var t = tamaño(120, 190, w, h);
	
	var code = sprintf( '<div class=\"tr\"><a class=\"clicka\" href=\"%s\"
  title=\"%s\"><span class=\"thumb_p\" > <img src=\"%s\" %s> </span>%s</a>
</div>', url, _data.title, img, mides,  _data.title );
Código:
function tamaño(maxWidth , maxHeight, w, h) {
  

  if (w > maxWidth || h > maxHeight) {
  if (w > h) {
    h = (h * maxWidth) / w;
    w = maxWidth;
  }
  else {
    w = (w * maxHeight) / h;
    h = maxHeight;
  }
}

var tam= sprintf ('width=\"%s px\" height=\"%s px\"', w, h);
return 	tam;
}

Última edición por LLap; 02/08/2010 a las 11:12
  #8 (permalink)  
Antiguo 12/01/2011, 14:56
 
Fecha de Ingreso: enero-2011
Mensajes: 1
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: background-image, backround-size - no funciona bien

No acabo d entender lo que quieres hacer..
Quieres que la imagen tambien sea link?? :D

Etiquetas: Ninguno
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 09:28.