Como definir uma imagem de fundo em CSS.
Criar um site é uma ótima maneira de se expressar. Embora existam muitas ferramentas de construção de sites, escrevê-las você mesmo é uma maneira divertida de aprender mais sobre como os sites funcionam nos bastidores. Um bom projeto para iniciantes é criar um site e adicionar uma imagem de fundo com CSS. Este projeto irá ajudá-lo a trabalhar com HTML e CSS.
O que é CSS?
CSS significa Cascading Style Sheet. É uma linguagem de programação que permite estilizar linguagens de marcação. Uma dessas linguagens de marcação é o HTML ou Hyper-Text Markup Language. HTML é usado para criar sites. Embora você possa controlar alguns dos estilos do site usando HTML, CSS oferece muito mais controle e opções de design.
Criação de um site básico com HTML
Visto que CSS é apenas uma linguagem de estilo, para usá-lo, primeiro precisamos de algo para estilizar. Um site muito básico será suficiente para começarmos a brincar com CSS. Nossa página exibirá "Hello World".
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>Caso você não esteja familiarizado com HTML, vamos examinar rapidamente o que todos os elementos fazem. Conforme mencionado, HTML é uma linguagem de marcação, o que significa que ela usa tags para marcar o que é o texto. Sempre que você vê uma palavra cercada por <> , é uma tag. Existem dois tipos de tags, uma tag que marca o início de uma seção usando <> e outra que marca o final de uma seção usando </>. O texto dentro de uma seção também pretende tornar essa distinção mais fácil de ver.
Em nosso exemplo, temos quatro tags. A tag html indica quais elementos fazem parte do site. A tag head contém as informações do cabeçalho que não são exibidas na página, mas são necessárias para criar a página. Todos os elementos exibidos estão entre as tags do corpo . Temos apenas um elemento exibido, a tag p . Diz ao navegador da web que o texto é um parágrafo.
Adicionando CSS ao HTML
Agora que temos uma página simples, podemos personalizar o estilo com CSS. Nossa página é muito simples agora e não há muito que possamos fazer, mas vamos começar destacando nosso parágrafo para que possamos distingui-lo do fundo adicionando uma borda.
<html>
<head>
</head>
<body>
<p style="border-style: solid;" >Hello World</p>
</body>
</html>
Agora, nosso parágrafo será circundado por uma borda preta. Adicionar uma descrição de estilo em CSS à nossa tag de parágrafo informou ao site como estilizar o parágrafo. Podemos adicionar mais descrições. Vamos aumentar o espaço em branco, ou preenchimento, ao redor de nosso parágrafo e centralizar nosso texto.
<html>
<head>
</head>
<body>
<p style="border-style: solid; padding: 30px; text-align: center" >Hello World</p>
</body>
</html>
Nosso site parece melhor, mas nosso HTML está começando a ficar confuso com todas as descrições na tag de parágrafo. Podemos mover essas informações para nosso cabeçalho. Nosso cabeçalho é para informações que precisamos para exibir o site corretamente.
<html>
<head>
<style>
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
</style>
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>Agora nosso HTML é mais fácil de ler. Você vai notar que tivemos que mudar algumas coisas. A tag de estilo informa as informações de estilo do navegador da web, mas também qual estilo deve ser definido. Em nosso exemplo, usamos duas maneiras diferentes de dizer o que estilizar. O p na tag de estilo informa ao navegador da Web para aplicar esse estilo a todas as tags de parágrafo. A seção #ourParagraph diz para estilizar apenas os elementos com o id ourParagraph . Observe que a informação de id foi adicionada à tag p em nosso corpo.
Importando um arquivo CSS para o seu site
Adicionar as informações de estilo ao cabeçalho torna nosso código muito mais fácil de ler. No entanto, se quisermos estilizar muitas páginas diferentes da mesma maneira, temos que adicionar esse texto no topo de cada página. Isso pode não parecer muito trabalho, você pode copiar e colar depois de tudo, mas cria muito trabalho se você quiser alterar um elemento posteriormente.
Em vez disso, vamos manter as informações CSS em um arquivo separado e importar o arquivo para estilizar a página. Copie e cole as informações entre as tags de estilo em um novo arquivo CSS ourCSSfile.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Em seguida, importe o arquivo para o arquivo HTML.
<html>
<head>
<link rel="stylesheet" href="ourCSSfile.css">
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>Adicionando uma imagem de fundo com CSS
Agora que você tem uma base sólida em HTML e CSS, adicionar uma imagem de plano de fundo será moleza. Primeiro, identifique a qual elemento você deseja fornecer uma imagem de plano de fundo. Em nosso exemplo, adicionaremos um plano de fundo a toda a página. Isso significa que queremos mudar o estilo do corpo . Lembre-se de que as tags do corpo contêm todos os elementos visíveis.
body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Para alterar o estilo do corpo em CSS, primeiro use a palavra-chave body . Em seguida, adicione chaves como fizemos antes de {}. Todas as informações de estilo do corpo devem estar entre chaves. O atributo de estilo que desejamos alterar é a imagem de fundo . Existem muitos atributos de estilo. Não espere memorizá-los todos. Marque uma folha de dicas de propriedades CSS com atributos que você deseja lembrar.
Após o atributo, use dois pontos para indicar como você alterará o atributo. Para importar uma imagem, use url () . indica que você está usando um link para apontar para a imagem. Coloque a localização do arquivo entre colchetes entre aspas. Finalmente, termine a linha com um ponto e vírgula. Embora o espaço em branco não tenha significado em CSS, use recuo para tornar o CSS mais fácil de ler.
Nosso exemplo se parece com este:
Se sua imagem não estiver sendo exibida corretamente por causa do tamanho da imagem, você pode alterar a imagem diretamente. No entanto, existem atributos de estilo de fundo em CSS que você pode usar para alterar o fundo. As imagens menores que o fundo serão repetidas automaticamente no fundo. Para desligar isso, adicione background-repeat : no-repeat ; para o seu elemento.
Também há duas maneiras de fazer uma imagem cobrir todo o fundo. Primeiro, você pode definir o tamanho do fundo para o tamanho da tela com tamanho do fundo: 100% 100%; , mas isso esticará a imagem e poderá distorcê-la muito. Se não quiser que as proporções da imagem mudem, você também pode definir o tamanho do fundo a ser coberto . Cover fará com que a imagem de fundo cubra o fundo, mas não distorce a imagem.
Mudando a cor de fundo
Vamos mudar uma última coisa. Agora que temos um histórico, nosso parágrafo é difícil de ler. Vamos deixar o fundo branco. O processo é semelhante. O elemento que queremos modificar é #ourParagraph. O # indica que "ourParagraph" é um nome de id. Em seguida, queremos definir o atributo background-color para branco.
body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}
Muito melhor.
Continuando a projetar seu site com CSS
Agora que você sabe como alterar o estilo de diferentes elementos HTML, o céu é o limite! O método básico para alterar os atributos de estilo é o mesmo. Identifique o elemento que deseja alterar e descreva como alterar o atributo. A melhor maneira de aprender mais é brincar com diferentes atributos. Desafie-se a mudar a cor do seu texto a seguir.
