JMiur [E]

Aprovechemos la salida Firefox 3.6 para experimentar un poco con las nuevas extensiones que se corresponden con algunas de las directivas para el futuro CSS3 y que lentamente van siendo agregadas a los navegadores a excepción de Intenet Explorer.

Una de ellas es la que permite hacer algo que muchos preguntan y alguna vez hubo una entrada al respecto: Redimensionar la imagen de fondo.

Esta alternativa está contemplada en los borradores de la w3org y la propiedad tendría el nombre genérico de background-size pero, los navegadores utilizan nombres distintos:

-moz-background-size en Firefox 3.6
-o-background-size en Opera 9.5
-webkit-background-size en Google Chrome y Safari
-khtml-background-size Konqueror 3.5.4

Nos permite establecer la dimensión de la imagen a usar como fondo y admite dos valores, el ancho y el alto, tanto en pixeles como en porcentajes. Eventualmente, hay otros valores que podemos usar como auto, contain y cover que establecen la relación ancho/alto a mantener.

Mucho blablabla. Vamos a los ejemplos para que se vea con claridad.

Usaremos una imagen que tiene tiene 200x158 pixeles y la aplicaremos como fondo a un DIV al que le daremeos una dimensión de 300x300. Agregado el estilo, podríamos tener este código:
<div style="background: #000 url(URL_imagen) no-repeat left top; height: 300px;  width: 300px;"></div>
y veríamos esto:


Como la imagen de fondo es pequeña, por defecto, no alcanza a cubrir el total del rectángulo así que, le agregaremos la nueva propiedad con valores de 100% tanto para el ancho como para el alto:
background-size: 100% 100%;
Y veríamos esto:


Ahora, hagamos lo mismo pero, con valores del 50% para el ancho en un caso y para el alto en el otro:
background-size: 100% 50%;

background-size: 50% 100%;
Este sería el resultado:


¿Y que hacen contain y cover? Los definimos así:
/* el rectángulo de la izquierda */
background-size: contain;

/* el rectángulo de la derecha */
background-size: cover;
Y veríamos esto en Firefox solamente porque al parecer, esos valores aún no son soportados correctamente por los otros navegadores.

14 comentarios:

Bocha  

JMiur, en este blog (http://abrancancha-ac.blogspot.com/) coloque un buscador en el menu, pero me quedo abajo, como hago para que quede en la misma linea, en el costadito derecho.

Saludos y espero tu respuesta.

Responder
k_nelita  

Hola JM, me perdí... veo todas las imagenes iguales y en el mismo sitio del rectángulo en todos lo ejemplos que das... es porque no tengo FireFox 3.6? Solo con esa versión se ve correctamente?
Donde puedo descargarlo? Ya no es mas Beta? Tengo FF 3.5.7 Y no he leído nada que ya estuviera disponible la descarga... pero igual, yo tengo configurado que se actualiza solo... no se, no entiendo... todavía no lo tengo :(
Abrazo ;)

Responder
JMiur  

bocha:
En este momento, el FORM dice style="display: inline;" Debería tener otras propiedades; un ejemplo:
style="float:right;position:relative;right:10px;top:-25px;"
Con top y right se controla pa posición exacta dentro del fondo negro.

k_nelita:
Sí, efectivamente, la versión 3.6 ya salió hace unos dias y si querés descargarla podés Mozilla o poes ir al menú Ayuda y allí, hacer click en "Buscar actualizaciones". A veces, las actualizaciones automáticas tardan.

Responder
Graciela  

Creía que era la hora, todas las imagenes iguales ;)

Responder
Gem@  

Yo lo veo muy bien pero la pega es la misma de siempre la gran mayoría no actualiza su navegador no porque como knelita no sabe de la última versión sino porque no tienen idea que es algo muy recomendable hacer.
El tema está si nos conformamos con verlo bien nosotros mismos o pasamos de como pueden verlo los usuarios de otros navegadores.

Responder
El Filómata  

JM aprovecho para hacerte otra consulta relacionada con la colocación de viñetas.
En el blog de prueba que utilizo (http://www.probations.blogspot.com) coloque siguiendo el procedimiento que me indicaste en el HTML1 "ultimas entradas" coloqué en el 1º 0px valor 1 y esta como se lo ve. Colocando valor 0 o -1, -2 es como si saliera de linea y desaparece.
#HTML1 li {background: transparent url(http://i46.tinypic.com/2u7966a.png) no-repeat scroll 1px 0px;}
este es el truco como lo tengo actualmente antes de ]]
Es correcto mi procedimiento?
Puede ser ancho de sidebar?
Cordialmente.
Claudio Casco

Responder
JMiur  

Graciela:
Recuerde, tiene que ser FF3.6, Google Chorme, Opera, etc; en versiones anteriores a FF 3.6 no anda y en Internet Explorer tampoco.

Gem@:
Indudablemente, es algo que conviene hacer. Si está marcada la actualización automática, eso ya es algo bueno aunque a veces demora un poco.

El otro tema si que es interesante pero no hay una sola respuesta, dependerá de cada uno. Con lo que no estaría de acuerdo es con limitarse a lo que puede o no puede hacer Internet Explorer; por el contrario, creo que muchas de las mejoras de IE8 son el resultado de la presión ejercida por la competencia y eso es beneficioso para todos los usuarios.

De todos modos, saber que estas cosas existen, siempre es bueno aunque no las apliquemos, abren el abanico de posibilidades. Sólo hay que usarlas con cuidado y verificar que el resultado, aún en los navegadores que no las soporten, sea relativamente razonable.

El Filómata:
Está perfecto, lo que ocurre en ese blog de pruebas es que las propiedades CSS son diferentes a las de tu blog principal y entonces, debemos hacer algún ajuste. El principal es establecer la separación del texto de los items, lo separamos con padding-left para dejar un espacio y que la imagen no se superponga. Podría ser algo así:

#HTML1 li {
background: transparent url(http://i46.tinypic.com/2u7966a.png) no-repeat scroll 0 2px;
padding-left:32px;
}

Con padding se mueve el texto una cantidad de pixeles y en background posicioné el fondo un poco hacia abajo para centrarlo verticalmente. Todos esos valores son subjetivos, claro; dependen del tipo de fuente que uses y depende de la imagen en si misma pero, siempre controlas eso con los mismos datos.

Responder
Graciela  

A Mozilla lo actualizo porque te avisa, a IE no tengo la menor idea...se me ocurre que somos muchos los que no sabemos, la última de IE me dijiste vos :)
Y así vamos por la vida aprendiendo todos los días algo nuevo, qué aburrido sería entonces!!! te estoy dando letra para una entrada jijiji

Estamos con cortes de luz 6 horas al día: 3 y 3 Viva EPEC y la P:X es así que estás en ese poco tiempo libre haciendo algo y saf corte caramba!!! sin dormir la siesta Imposible sin ventilador.

Responder
JMiur  

Ohhh duro para estar sin electricidad con estos calores :(

Responder
k_nelita  

Achalay!!:O Parece cosa e' mandinga! ja ja Como cambió todo con FF 3.6!! :D
Te hice caso y lo actualicé yo, porque las automáticas parece que no llegaban nunca...
Yo siempre tengo los navegadores y todo actualizado a pesar de mi hijo que parece un viejo conservador, no le gustan los cambios y se aferra a las cosas viejas :P tenemos los roles invertidos jajja

Al margen de esto, aunque no tan al margen, lo sigo viendo tan lento como siempre al inicio, a FF, y algo que me pasaba hace un tiempo con la versión anterior y me sigue pasando con esta, no me guarda las direcciones de correo por ejemplo, ni nada que ponga en los formularios, a pesar de haberlo configurado para que si lo haga, este y el otro igual... alguna idea de que pueda ser??
Estoy cansada de tipear mi dirección, nick o lo que sea mil veces al día, en cada sitio que entro... aunque lo haga muchas veces al día y sin cerrar el navegador... si lo cierro también, obvio! :S
Besis ;)

Responder
JMiur  

No. No sabría decirte, si está configurado para eso, no deberías tener problemas. En todo caso, tal vez, te convendría hacer una instalación limpia, es decir, desinstalarlo primero y eliminar la carpeta Profile ( oc copiarla en otro lado y luego borrarla) para que, de esa manera, se elimine cualquier error que puede estar allí y que la actualizacion no corrige.

Eso no es tan difícil de hacer, hay que tomar precausiones y guardar los datos que vamos a necesitar recuperar, marcadores, contraseñas, etc. Aunque se refiere a otra versión, en esta entrada se habla de eso. Es el método que utilizo normalmente. El instalador es el mismo así que, si no lo tienes, lo primero lo descargas.

Responder
Unknown  

Hola a todos, una consulta quiero redimensionar un modulo en joomla, pero quiero que sea el 20% del ancho del background, como puedo hacerlo, desde ya muchas gracias

JMiur  

No entiendo la pregunta.

Responder
Ilargi García  

¡Por fin! Muchísimas gracias :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR