Como definir uma imagem de fundo em CSS

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 Folha de Estilo em Cascata. É uma linguagem de programação que permite estilizar linguagens de marcação. Uma dessas linguagens de marcação é HTML ou Hyper-Text Markup Language. HTML é usado para criar sites. Embora você possa controlar parte do estilo do site usando HTML, o CSS oferece muito mais controle e opções de design.



Criando 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'.









Hello World



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 etiqueta. 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 visa tornar essa distinção mais fácil de ver.



Em nosso exemplo, temos quatro tags. o html tag indica quais elementos fazem parte do site. o cabeça tag 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 os corpo Tag. Temos apenas um elemento exibido, o p marcação. Diz ao navegador que o texto é um parágrafo.

Relacionado: 10 exemplos de código CSS simples que você pode aprender em 10 minutos



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.





Hello World






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.





Hello World




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 o nosso cabeçalho. Nosso cabeçalho é para as informações que precisamos para exibir o site corretamente.




p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}



Hello World



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 o que estilizar. 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. o #ourParagraph seção diz para estilizar apenas os elementos com o id ourParagraph . Notar que Eu iria informações foram adicionadas à tag p em nosso corpo.

como ligar de volta para um número privado

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 afinal, 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.






Hello World



Adicionando uma imagem de fundo com CSS

Agora que você tem uma base sólida em HTML e CSS, adicionar uma imagem 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 o corpo palavra-chave. 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 queremos mudar é 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.

Relacionado: 8 efeitos HTML interessantes que qualquer pessoa pode adicionar ao seu site

disco rígido externo não reconhecido windows 10

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 no CSS, use recuo para tornar o CSS mais fácil de ler.

Nosso exemplo é parecido com este:

Se a sua imagem não estiver sendo exibida corretamente devido ao tamanho da imagem, você pode alterar a imagem diretamente. No entanto, existem atributos de estilo de plano de fundo em CSS que você pode usar para alterar o plano de fundo. As imagens menores que o fundo serão repetidas automaticamente no fundo. Para desligar isso, adicione fundo de repetição:não repetir; para o seu elemento.

Também há duas maneiras de fazer uma imagem cobrir todo o plano de 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 você não quiser que as proporções da imagem mudem, você também pode definir o tamanho do fundo para cobrir . 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 seu fundo branco. O processo é semelhante. O elemento que queremos modificar é #ourParagraph. O # indica que 'ourParagraph' é um nome de id. Em seguida, queremos definir o cor de fundo Atribua ao 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.

Compartilhado Compartilhado Tweet O email Os 8 melhores sites para exemplos de codificação de HTML de qualidade

Quer aprender HTML para codificar seus próprios sites e aplicativos? Use estes exemplos de página da web e código-fonte para aprender HTML e CSS.

Leia a seguir Tópicos relacionados
  • Programação
  • HTML
  • Designer de Web
  • CSS
Sobre o autor Jennifer Seaton(21 artigos publicados)

J. Seaton é um escritor de ciências especializado em analisar tópicos complexos. Ela tem um PhD pela University of Saskatchewan; sua pesquisa se concentrou na utilização de aprendizagem baseada em jogos para aumentar o envolvimento dos alunos online. Quando ela não está trabalhando, você a encontrará lendo, jogando videogame ou fazendo jardinagem.

Mais de Jennifer Seaton

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever