Redimensionando background com CSS3 - background-size
CSS - Como redimensionar background com CSS3 utilizando background-sizeInformaçã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+.
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.
<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
div com background com tamanho em Pixels
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.
<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
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
<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
Criação e Diagramação