WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Redimensionando background com CSS3 - 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.jpg

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.

<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>
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

<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>
Exemplo de background-size: cover
Postado por: Arthur Di Polito
Criação e Diagramação 

 

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]