11 5563-9074
Orçamento

Redimensionando background com CSS3 - background-size

CSS - Como redimensionar background com CSS3 utilizando background-size
Publicidade

Informação
Uma das principais novidades introduzidas pelo CSS é o comando background-size. Esta nova propriedade permite controlar o tamanho e as propriedades de um background utilizando tamanho, porcentagem ou dois valores específicos: contain e cover.

Observação: Essa propriedade é compatíveis apenas com as seguintes versões dos navegadores: Internet Explorer 9+, Goolge Chrome 3+, Opera 10+, Firefox 4+ e Safari 4.1+.
 

Para demonstrar os efeitos do CSS background-size utilizaremos a imagem abaixo com o tamanho de 259(px) x  194(px) como exemplo de background.  
dica-background

Tamanho (Lenght)

Permite que seja especificado qual será o tamanho final da imagem de background utilizando valores em pixels (px) ou porcentagem (%). Vale lembrar que o valor ao se utilizar porcentagem é sempre relativo ao tamanho do elemento ao qual a imagem de background pertence, mas podendo ser alterado utilizando o CSS background-origin.
 

Veja abaixo um exemplo <style type="text/css">
    .exemplo1 {
        width: 300px;
        height: 200px;
        padding: 5px;
        border: 1px solid #333;
        background-image: url(http://www.webcis.com.br/images/imagens-noticias/background-size/imagem-background.jpg);
        background-size: 210px 210px;
        background-repeat: no-repeat;
    }

    .exemplo2 {
        width: 300px;
        height: 200px;
        padding: 5px;
        border: 1px solid #333;
        background-image: url(http://www.webcis.com.br/images/imagens-noticias/background-size/imagem-background.jpg);
        background-size: 60% 60%;
        background-repeat: no-repeat;
    }
</style>

<div class="exemplo1">Exemplo de div com background com tamanho em Pixels</div>

<div class="exemplo2">Exemplo de div com background com tamanho em Pixels</div>

Resultado

Exemplo 1:
div com background com tamanho em Pixels
Exemplo 2:
div com background com tamanho em Porcentagem

Contain

O valor contain especifica que a imagem de background será redimensionada para ter o maior tamanho possível mantendo suas proporções e garantindo que seu tamanho seja sempre menor ou igual ao elemento ao qual ela pertence.
 

Veja abaixo um exemplo <style type="text/css">
    .exemplo3 {
        width: 604px;
        height: 90px;
        padding: 5px;
        border: 1px solid #333;
        background-image: url(http://www.webcis.com.br/images/imagens-noticias/background-size/imagem-background.jpg);
        background-size: contain;
        background-repeat: no-repeat;
    }
</style>

<div class="exemplo3">Exemplo de background-size: contain</div>

Resultado

Exemplo de background-size: contain

Cover

O valor cover especifica que a imagem de background será redimensionada para ter o menor tamanho possível para que ela cubra toda a área do elemento ao qual ela pertence sem deixar espaçoes em branco e mantendo as proporções originais da imagem
 

Veja abaixo um exemplo <style type="text/css">
    .exemplo4 {
        width: 604px;
        height: 90px;
        padding: 5px;
        border: 1px solid #333;
        background-image: url(http://www.webcis.com.br/images/imagens-noticias/background-size/imagem-background.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
</style>

<div class="exemplo4">Exemplo de background-size: cover</div>

Resultado

Exemplo de background-size: cover
Publicidade
Autor: Arthur Di Polito
Criação e Diagramação