Com CSS3 Backgrounds você pode obter mais uso de propriedades de plano de fundo e obter mais controle dos elementos de plano de fundo.
As propriedades dos planos de fundo CSS3 são:
- border-size
- border-origin
Você pode adicionar várias imagens ao plano de fundo, mas somente em navegadores compatíveis com CSS3.
Border-size (tamanho de borda)
A propriedade border-size é usada para definir o tamanho da imagem de plano de fundo.
Exemplo de tamanho de borda
div{background:
url("tecforest.png"); background-size: 200px 200px;
background-repeat: no-repeat;}
Border-origin (fronteira-origem)
A propriedade border-origin é usada para definir a área de posicionamento das imagens de fundo.
Exemplo de tamanho de borda
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>TecForest - CSS</title>
<style type="text/css">
div{background: url("tecforest.png");background-size: 100% 100%;background-repeat: no-repeat; background-origin: content-box;}
</style>
</head>
<body>
<div>
<br><br><br><br><br><br><br><br>
</div>
</body>
</html>
Os valores da border-origin podem ser content-box, padding-box, ou border-box area.
