Background-size: Css para mudar tamanho de imagem de fundo de blogs e site, aumentar ou diminuir

Mostrarei os códigos Css para diminuir ou aumentar o tamanho de imagem de fundo de blogs, sites ou páginas da web.
Para mudar o tamanho da imagem de fundo com Css, usamos background-size, que funciona para novas versões mais atuais do Mozilla Firefox e Google Chrome, para o IE essa função só funciona para versão 9 e superior, e outros navegadores funciona para algumas versões mais antigas, Firefox já após 4 e Chrome após 2.

Para navegadores com versões mais antigas e alguns outros, você pode usar também:

-moz-background-size
-o-background-size
-webkit-background-size

Porém, são poucos usuários que usam versões mais antigas de navegadores, e, a cada dia diminui o número de usuários de versões antigas, sendo assim, talvez nem seja vantagem... Para ver detalhes de compatibilidade de navegadores com background-size clique aqui

Em alguns blogs ou sites, como os novos modelos do blogger, a background fica na body, sendo assim, pode mudar o tamanho da imagem de fundo apenas adicionando e modificando na parte mais baixa do css o seguinte código:body{background-size: 100% 100%;}Mas, os números devem ser mudados seus valores ou substituídos por alguns dos valores abaixo.

Tipos de medidas para usar em background-size

Veja quatro tipos de medidas que podem ser usados para os tamanhos de imagem de fundo:

1. background-size com tamanho fixo em px, ou seja pixel. Exemplo:

   background-size: 250px 300px;

2. background-size relativo ao tamanho do elemento ou janela, com porcentagem %
   Exemplo:

   background-size: 80% 50%;

3. background-size contain, dimensiona a imagem de fundo pelo tamanho da janela ou elemento que contém a imagem de fundo, mas de maneira que a imagem caiba toda sem cortes e sem deformar. Exemplo:

   background-size: contain;

4. background-size cover, dimensiona a imagem de fundo pelo maior tamanho da janela, seja na altura ou largura, porém, pode cortar uma parte da imagem para não deformá-la, mais usado como fundo da body, geralmente não fica bem quando usado em elementos Html como div ou outros. Exemplo:

   background-size: cover;

Exemplos de uso e tipos de background-size

Nos exemplos abaixo irei usar apenas essa imagem como background, você verá ela sendo dimensionada em várias medidas, se seu navegador estiver 'preparado' para isso.

background-size com pixel, px

Esse é muito simples de usar, só precisa saber calcular as medidas da imagem para que não deforme a figura dela.
O primeiro valor de background-size vai ser a largura da imagem e o segundo valor a altura, no exemplo abaixo, a imagem de fundo terá largura de 280px e a altura de 250px, independente do tamanho da janela.

Veja o exemplo abaixo com background-size: 280px 250px;

border:red 1px solid;
overflow:auto;
width:278px;
height:248px;
background:#ddd url(/imagens/pequena-plano-fundo.png) center center repeat;
background-size: 280px 250px;

Tanto para a altura como largura da imagem de fundo, você pode definir uma delas e deixar a outra para o navegador calcular, aí ele não deforma a imagem.

Agora veja outro exemplo, porém, esse usa a opção de deixar para o navegador calcular uma das medidas da imagem, usando a opção auto ele irá calcular a segunda medida, que é a largura, background-size: 350px auto;

border:red 1px solid;
overflow:auto;
width:349px;
background:#ddd url(/imagens/pequena-plano-fundo.png) center center no-repeat;
background-size: 350px auto;

Perceba que eu poderia ter colocado auto para a largura, apenas invertendo assim background-size: auto 350px; mas, cada caso é um caso.

background-size com porcentagem, %

Em background-size com porcentagem você vai dimensionar a imagem de acordo com o elemento que contem a imagem de fundo, se você optar por 50% esse valor será calculado com base no tamanho do elemento que contém ela ou, no caso de body, será o tamanho da janela. Veja um exemplo:

border:red 2px solid;
overflow:auto;
width:380px;
background:#ddd url(/imagens/pequena-plano-fundo.png) center center no-repeat;
background-size: 80% 70%;

Perceba que a imagem deformou sua 'paisagem', isso é comum nesse tipo de escolha, mas, como nos exemplos acima, você pode resolver isso usando a opção auto, agora usando esse código background-size: 80% auto;, veja um exemplo:

border:red 2px solid;
overflow:auto;
width:380px;
background:#ddd url(/imagens/pequena-plano-fundo.png) center center no-repeat;
background-size: 80% auto;

Veja que não deformou a ilustração da imagem, mas, parte pode ficar cortada se a janela ou elemento que tem ela for pequeno.
no exemplo acima, eu coloquei auto para a altura, se eu quisesse que a imagem tivesse 80% da altura da área, aí ficaria assim poderia ter colocado auto para a largura, apenas invertendo assim background-size: auto 80%;

background-size: contain

Com contain o navegador aumenta ou diminui a imagem até caber na altura ou largura, quando uma dela for atingida, aí para de dimensionar.

Perceba que a imagem fica aparecendo totalmente, mas ela é dimensionada para maior ou menor para que caiba, o navegador que vai decidir, vai calcular a largura e altura do elemento ou janela que terá a imagem de fundo e verá uma maneira de ajustar a imagem, perceba que, devido a pouca altura do quadro abaixo a imagem não poderia caber na largura sem deforma(esticar) horizontalmente mais do que verticalmente, claro que eu poderia fazer a imagem repetir para tapar o buraco que ficou, mas isso não vem ao caso.

border:red 2px solid;
overflow:auto;
width:380px;
height:140px;
background:#ddd url(/imagens/pequena-plano-fundo.png) left top no-repeat;
background-size:contain;

Neste exemplo ocorre o contrário do ocorrido acima, a imagem foi dimensionada até caber, quando coube na largura ele parou, porque iria deformar se aumentasse mais na altura.

border:red 2px solid;
overflow:auto;
width:330px;
height:200px;
background:#ddd url(/imagens/pequena-plano-fundo.png) left top no-repeat;
background-size:contain;

background-size: cover

Com cover, a prioridade é não deixar espaço sem a imagem de fundo, mas para isso, talvez precise cortar a sobra, o navegador irá dimensionar a imagem até que atinja a altura e largura, mas, vai ultrapassar uma das medidas da janela ou elemento, tudo isso para 'tapar' toda a área com aquela imagem de fundo, por isso, o navegador pode cortar a imagem de fundo na altura ou largura, observe os exemplos abaixo e veja que num deles a imagem está cortada no lado e outro está cortada embaixo.

border:red 2px solid;
overflow:auto;
width:100%;
height:140px;
background:#ddd url(/imagens/pequena-plano-fundo.png) left top no-repeat;
background-size:cover;

border:red 2px solid;
overflow:auto;
width:300px;
height:250px;
background:#ddd url(/imagens/pequena-plano-fundo.png) left top no-repeat;
background-size:cover;

Outras dicas sobre background

De certa maneira, é fácil mudar o tamanho da imagem de fundo, mas, dependendo do tamanho do elemento ou janela que contém a background, ela pode ser 'cortada' ou ficar faltando um pedaço, aí fica mais difícil, porém, as coisas são assim mesmo, para mexer com isso é preciso ter uma boa noção, seja do assunto, até de matemática, porque as vezes você precisará calcular para acertar, pensar em várias soluções que são possíveis, e saber procurar na web outras propriedades de background, que são complementares e ajudam no efeito desejado, propriedades como o background-repeat e background-position, ambas eu usei nos exemplos acima, só que estão resumidas, ao ver a palavra 'repeat' você saberá que usei background-repeat, ao ver 'center' ou 'left' você saberá que usei background-position, ambos de forma resumida.
A ultima e importante dica é usar um blog de testes para aprender, testar o que fica melhor em seu modelo, e praticar.

• Mais de 200 imagens para plano de fundo no novo design do blogger
• Sua própria imagem de fundo no blog do blogger com novos modelos
• Background: Baixar plano de fundo grátis para blog, site ou Pc
• Aumentar ou diminuir o tamanho de imagem usando o paint
• Colocar barra rolagem em div, caixa com scroll
• Como mudar imagem no Blogspot