Curso
CSS: Background - Preenchendo o fundo de um elemento
Background, ou área de fundo é o espaço localizado atrás de um conteúdo. Esse espaço pode ser preenchido utilizando uma cor - propriedade background-color que você já conhece, e também com uma imagem. Alterar o background é muito comum para dar um destaque maior em determinado elemento na página. Neste curso vamos relembrar como inserir uma cor de fundo além de aprender como inserir e estilizar uma imagem atrás de um elemento.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
6 horas
CSS: Background - Preenchendo o fundo de um elemento (6 aulas)
Aula 1 - Introdução
Existem diversas formas de destacar um elemento HTML na página, uma delas é alterando o background. Nessa aula vamos ver o que é background e qual é a sua importância na estilização de elementos HTML.
Aula 2 - Relembrando background-color
Para preencher o fundo de um elemento HTML com uma cor, utilizamos a propriedade background-color. Você já aprendeu essa propriedade, porém nesta aula vamos relembrar a sintaxe usada para alterar a cor de fundo de um elemento.
Aula 3 - Background-image
Já sabemos que além de preencher o elemento com uma cor também podemos inserir uma imagem de fundo. Nesta aula vamos ver como isso é feito através da propriedade background-image.
Aula 4 - Estilizando a imagem de fundo
Ao preencher o fundo de um elemento com uma imagem, podemos fazer alguns ajustes nela como, por exemplo, fazer com que ela fique centralizada no elemento, preencha todo espaço disponível dentre outros. Aprenda nesta aula como isso é feito.
Aula 5 - Exemplo prático
Nesta aula vamos colocar em prática o que aprendemos. Vamos conhecer um exemplo prático que utiliza as propriedades de background para inserir uma imagem no fundo de um elemento.
Aula 6 - Faça você mesmo
Nesta aula vamos explicar os passos dados para criar e estilizar a página web que vimos na aula anterior. Lembrando que esta página utiliza as propriedades background-image, background-attachment, background-repeat e background-size.
Veja outros cursos de HTML e CSS
CSS: Flexbox
CSS: Position relative e absolute
CSS: Position fixed