Olá galera, nesse post vamos falar como inserir um Background-image no nosso documento HTML através do CSS.
A propriedade Background permite que você controle a cor do plano de fundo de um elemento, configure uma imagem como plano de fundo, e posicione uma imagem em uma página.
Primeiro vamos criar o nosso documento HTML, bem simples só com uma div que será a div que irá receber a imagem.
Listagem 1: página HTML
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Propriedades de background em CSS - Linha de Código</title>
<!-- Aqui chamamos o nosso arquivo css externo -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="teste">
</div>
</body>
</html>
Background-image
Nota: Vamos definir um tamanho de 400x de largura e 300px de altura para a nossa div para que possamos demonstrar os efeitos que queremos.
Listagem 3: background-image
#teste{
width: 400px;
height: 300px;
background-image: url(imagem.png);
}
Por padrão os navegadores assumem algumas propriedades, mas com a ajuda das outras propriedades podemos manipular isso de uma forma bem simples e deixar a imagem exatamente como queremos.
No próximo post de CSS vamos falar de outras propriedades do background, para podermos aperfeiçoar nosso plano de fundo, dentro do documento HTML. Por enquanto falei somente como aplicar uma imagem como plano de fundo.
Espero que tenha gostado, até a próxima.
Nenhum comentário:
Postar um comentário