Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Backgrounds – Parte 3: background-size - Kolaborativa

Backgrounds – Parte 3: background-size

background-size


Antes do CSS3, o tamanho de fundo era determinada pelo tamanho real da imagem utilizada. A propriedade background-size permite que você altere o tamanho da imagem de fundo para melhor atender sua página. Será possível especificar em termos de porcentagem ou pixels quão grande uma imagem de fundo deve ser. Isto irá permitir a reutilização de imagens em vários contextos diferentes e também expandir um fundo para preencher uma área com mais precisão.

Há os seguintes valores possíveis:

  • background-size: 100px 100px; redimensiona a imagem para o tamanho especificado. O primeiro valor especifica a largura enquanto o segundo valor especifica a altura da imagem.
  • background-size: 50% 100%; redimensiona a imagem para o tamanho especificado. As porcentagens são em relação ao tamanho do elemento que contém, sendo o primeiro valor a largura enquanto o segundo valor a altura da imagem.
  • background-size: contain; diminui a escala da imagem para caber no elemento (manter proporção de pixel).
  • background-size: cover; aumenta a escala da imagem para caber no elemento (manter proporção de pixel).

OBS: Lembrando-se que para usar a propriedade no navegador Safari e Google Chrome utiliamos antes do código -webkit-, e para o Opera -o-. No entanto, se o seu navegador não suporte a propriedade, então você só vai ver a imagem no canto superior esquerdo da div ou ela no seu tamanho original.

Trabalhando com pixels

Exemplo background-size:


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

O tamanho original dessa imagem na realidade é de 118px de largura e 150px de altura. Mas com a propriedade background-size nós podemos altera-la da forma que nós interessar.

Trabalhando com porcentagem

Outra forma de utilizar a propriedade é usando porcentagem ao invés de pixels.

Exemplo background-size com porcentagem:


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Trabalhando com background-size: contain

Para filtrar um pouco mais essa informação no Firefox não funcionará. Vejam o exemplo com o Chrome ou com o Safari. Experimente redimensionar esse Exemplo Live. Mas nem preciso dizer que não funcionará no Internet Explorer né?

Exemplo background-size: contain:


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Agora, para quem não conseguiu ver o exemplo em seu navegador, acesse aqui a página com o exemplo e veja também!

EXEMPLO BACKGROUND-SIZE: CONTAIN


OBS: a propriedade “background-attachment” com o valor “fixed” é usada em conjunto em nosso código porque ela vai permitir que a imagem fique fixa conforme redimensionamos a página.

Trabalhando com background-size: cover

Experimente redimensionar esse Exemplo Live.

Exemplo background-size: cover:


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Agora, para quem não conseguiu ver o exemplo em seu navegador, acesse aqui a página com o exemplo e veja também!

EXEMPLO BACKGROUND-SIZE: COVER


OBS: a propriedade “background-attachment” com o valor “fixed” é usada em conjunto em nosso código porque ela vai permitir que a imagem fique fixa conforme redimensionamos a página.

Outras aplicações

Segue agora um exemplo simples de redimensionar o logotipo CSS3 como background no canto superior esquerdo e um texto.
Exemplo background-size:

Esse é um exemplo onde redimensionamos nosso logo original com a propriedade background-size, nós podemos alterar segundo nossa vontade, bastando apenas seguir a proporção para obter uma ótima aparência. Isso não é o máximo?!


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

There are 2 comments. Add yours

  1. 11th maio 2013 | Laura says: Responder
    Olá dodilei, muito bom o código css, você sabe se tem como fazer essa mesma função em jquery, para funcionar no IE ?
    • 11th maio 2013 | Dodilei says: Responder
      Laura eu não sei sobre os IEs mais antigos, mas apartir do IE9 já é suportada.

Join the Conversation