Fundo | Tutorial de CSS | #12 | #uninerds | Universo dos Nerds
2Mais informações:
http://www.uninerds.net/?locale=pt_BR#!html-css-e-javascript/tutorial-de-css
Initial e Inherit: https://youtu.be/FlrllrGksX0
Cores: https://youtu.be/Ex8lL_jesJ4
Arquivo Externo: https://youtu.be/TYaQ2UHjTNI
Largura e Altura: https://youtu.be/Yofb4DCAOh0
Redes Sociais
Facebook: https://www.facebook.com/uninerds
Twitter: https://www.twitter.com/uninerds
YouTube: https://www.youtube.com/user/uninerds?sub_confirmation=1
LinkedIn: https://www.linkedin.com/company/uninerds
Instagram: https://www.instagram.com/uninerds
Gostou do vídeo? Veja 10 opções de como você pode apoiar o Universo dos Nerds:
https://youtu.be/KYAljlRtlb4
Grupo recomendado no vídeo:
https://www.facebook.com/groups/DevAt
Hashtags: #uninerds #css
Afiliado: http://www.cursos24horas.com.br/parceiro.asp?cod=promocao131331
Contato: uninerds@uninerds.net
Para alterar o fundo temos as seguintes propriedades:
- background-color serve para alterar a cor de fundo e o valor padrão é transparent
- background-image serve para definir uma imagem para o fundo, o valor padrão é none e deve utilizar a função url() para definir a imagem
- background-repeat serve para definir como a imagem de fundo irá repetir e pode receber os seguintes valores:
- repeat irá repetir para todos os lados
- repeat-x irá repetir na horizontal
- repeat-y irá repetir na vertical
- no-repeat não irá repetir em nenhum lado
- space irá repetir a imagem de uma ponta a outra sem esticar deixando espaço entre elas
- round irá repetir a imagem de uma ponta a outra esticando a imagem e para essa funcionar corretamente deve definir height
- background-attachment serve para definir como a imagem irá se comportar em relação a barra de rolagem e pode receber os seguintes valores:
- scroll ao rolar a barra de rolagem a imagem não irá acompanhar
- fixed a imagem ficará fixa mesmo ao rolar a barra de rolagem
- local funciona da mesma forma que o scroll
- background-position serve para definir a posição que a imagem irá ficar e além de receber valores em unidades de medida e porcentagem também pode receber os seguintes valores:
- left top superior esquerdo
- left center lado esquerdo centralizado
- left bottom inferior esquerdo
- center top superior centralizado
- center center meio
- center bottom inferior centralizado
- right top superior direito
- right center lado direito centralizado
- right bottom inferior direito
É possível definir todas elas na propriedade background seguindo a ordem que foi explicado