Propriedade Background-size

Tradução do espanhol para o portuguêsMostrar romanização

obs.: 

as imagens, vide em

http://vagabundia.blogspot.com/
2010/01/la-propiedad-background-size.html

 

Propriedade Background-size

Seize the sair do Firefox 3.6 para experimentar um pouco com as novas extensões que correspondem a algumas das directivas para o CSS3 futuro e que estão lentamente a ser acrescentado aos navegadores exceto para Intenet Explorer.

Um deles é o que nos permite fazer algo que muitos pedem e já houve uma entrada sobre o assunto: Redimensione a imagem de fundo.

Esta alternativa está prevista nos projectos da propriedade seria w3org e o nome genérico para o fundo de tamanho, mas os browsers utilizam nomes diferentes:

-moz-background-size no Firefox 3,6
-o-fundo-size no Opera 9,5
-webkit-background-size no Google Chrome e Safari
-khtml-background-size Konqueror 3.5.4

Ela nos permite estabelecer o tamanho da imagem para usar como papel de parede e suporta dois valores, a largura e altura, em pixels e em porcentagem. Eventualmente, há outros valores que podemos usar como um carro, conter e cobrir a definição de ligação largura / altura para manter.

Muito blablabla. Vamos aos exemplos para ver claramente.

Nós iremos usar uma imagem que você tem é 200x158 pixels e aplicá-lo como fundo de uma DIV para daremeos a uma dimensão de 300x300. Adicionado o estilo, poderíamos ter este código:

<div style="background: no-repeat url(URL_imagen) #000 deixou top; width: 300px; height: 300px;"> </ div>

e gostaríamos de ver isto:


Como a imagem de fundo é pequena, por padrão, não é suficiente para cobrir todo o rectângulo assim, vamos adicionar o novo imóvel com valores de 100% para ambos, largura e altura:

-moz-background-size: 100% 100%;-o-fundo-size: 100% 100%;-webkit-background-size: 100% 100%;

E gostaríamos de ver isto:


Agora faça o mesmo, mas com valores de 50% para a largura em um caso e para a alta nos outros:

-moz-background-size: 100% 50%;-o-fundo-size: 100% 50%;-webkit-background-size: 100% 50%;

-moz-background-size: 50% a 100%;-o-fundo-size: 50% a 100%;-webkit-background-size: 50% a 100%;

Isso seria parecido com:


O que eles contêm e capa? Nós definimos o seguinte:

/ * O retângulo à esquerda * /
-moz-background-size: Container;

/ * O retângulo à direita * /
-moz-background-size: cobertura;

E gostaríamos de ver isso no Firefox só porque, aparentemente, esses valores ainda não estão devidamente apoiada por outros navegadores.

Original

La propiedad background-size

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:

-moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-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:

-moz-background-size: 100% 50%; -o-background-size: 100% 50%; -webkit-background-size: 100% 50%;

-moz-background-size: 50% 100%; -o-background-size: 50% 100%; -webkit-background-size: 50% 100%;

Este sería el resultado:

¿Y que hacen contain y cover? Los definimos así:

/* el rectángulo de la izquierda */
-moz-background-size: contain;

/* el rectángulo de la derecha */
-moz-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.

 

 fonte  e créditos:http://vagabundia.blogspot.com

Vagabundia

de Vagabundia <vagabundia@gmail.com>
para brandaodasilvaedilene@gmail.com
datada de 25 de janeiro 2010 02:06
Assunto Vagabundia
enviado feedburner.bounces.google.com
assinado pelo google.com

Vagabundia  para mim

mostrar detalhes 02:06 (11 horas atrás)

	Originado:

---

La propiedad background-size Posted: 24 Jan 2010 07:00 PM PST 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 -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: pero, los navegadores utilizan nombres distintos: <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: -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-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: -moz-background-size: 100% 50%; -o-background-size: 100% 50%; -webkit-background-size: 100% 50%; -moz-background-size: 50% 100%; -o-background-size: 50% 100%; -webkit-background-size: 50% 100%; Este sería el resultado: ¿Y que hacen contain y cover? Los definimos así: /* el rectángulo de la izquierda */ -moz-background-size: contain; /* el rectángulo de la derecha */ -moz-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.

 

 

 

http://redeselinks.blogspot.com