E aí e agora pessoal nós vamos conhecer a propriedade background aqui do CSS ou seja o fundo background quer dizer o que fica atrás ou no fundo né propriedade background ela serve tanto para a gente colocar como fundo uma cor sólida né uma cor única como também uma imagem A gente pode usar isso para enfeitar que o o nosso a nossa página HTML então só para gente exemplifi Car o uso dessa tag aqui por exemplo no nosso documento poderia na tag Bari né que é o corpo do nosso arquivo e eu posso colocar aqui um
background background um traço color é uma cor específica e passar uma cor que eu quero por exemplo posso colocar esse vou colocar esse tom de azul aqui ó salvar Olá já ficou determinado que eu quero essa cores seu background-color Ou seja a cor sólida né a cor do fundo poderia colocar cor hexadecimal da mesma forma como funciona aqui à propriedade Cola outra propriedade relacionada ao background é um background-image ou seja uma imagem de fundo né só para mostrar como isso funciona eu vou fazer o seguinte eu vou aí deixa eu tirar esse background-color eu vou
deixar branco mesmo para não cá atrapalhando nosso nossa aula e eu vou aqui na nossa index eu vou fazer aqui uma div Antes aqui do link só para gente poder mostrar o uso desse dessa propriedade de fundo background fazer uma div e a Class Oi livre vai ser exemplo é back the background certo e não vai ter nada aqui dentro ou até posso escrever um conteúdo aqui colocar um p1p Lauren normal aqui só pra gente colocar um parágrafo certo colocamos aqui um pelore no nosso exemplo Beck aqui e agora a gente vai vir aqui nas
nossas classes Vamos colocar aqui. É exemplo Beck para a gente criar esse essa nossa classe e aqui um exemplo Beck eu vou dizer que ele vai ter uma altura de 100 pixels Oi e a gente vai colocar um background um color e é Grey aqui cinza certo Olha lá a gente fez aqui uma área zinho com um fundo sólido né até um texto Dentro a gente não precisava talvez desse texto dentro dentro eu colocar 300 pixels aqui para ficar maior Beleza vou tirar esse conteúdo do parágrafo aqui que eu quero só mostrar para vocês como
funciona o atributo de background background color a gente já viu que é uma cor sólida certo está colocado aqui qualquer a cor a cor vai ser cinza Mas eu posso colocar que eu quero que uma imagem fica aqui nesse meu componente certo então vou fazer o seguinte eu vou ir lá no no pet seus mesmo pexels nos entrar no site do pectus que eu já mostrei para vocês em outra aula vou buscar aqui a textura background or Texture background aqui e vou escolher uma imagem aqui the background ou seja de fundo certo pessoal eu vou
escolher deixou maximizar isso aqui e na orientação vou colocar a montar o presente pegar uma textura que esteja nesse sentido Pode até ser essa Pode até ser vamos pegar essa Areinha preta aqui ó vou clicar aqui em baixar grátis e vou salvar isso lá dentro da pasta do nosso projeto está aqui em sites aulas SS a gente pode criar uma nova pasta chamada e MG de imagens e aqui eu posso chamar de background. Jpg o fundo né tanto faz Vou salvar baixei assim Imagem Beleza agora que que eu vou fazer eu quero que essa imagem
que eu baixei ela seja o fundo desse elemento então eu vou usar agora a propriedade se chama background traço image dessa forma aqui ó background-image certo e aí eu passo o parâmetro URL para indicar aonde que esse arquivo Tá bom a gente está dentro de estilo com CSS certo então a gente tá dentro dessa parte aqui para eu pegar essa imagem eu teria que voltar uma paz e traz para passo imagem dentro dessa pasta imagem eu teria meu background pouco jpg certo então você tem que sempre verificarem aonde você tá dentro da hierarquia do seu
projeto das pastas aqui a gente tá e estilo. CSS então para a gente achassem mais teria que voltar uma pasta para trás então voltando aqui no meu código eu vou apontar que é dentro de aspas duplas aqui que vai estar voltar uma pasta para trás a passa e MG e background. Jpg exatamente isso que eu quero indicando assim qual é o caminho da imagem que eu quero de fundo então background-image URL e aqui dentro dos parentes eu passo entre aspas duplas o caminho que eu achar essa imagem dentro do meu projeto Se eu der um
control S Olha lá ele já apareceu um pedaço daquele nosso daquela nossa textura só que se você observar e a textura era assim se a gente olhar aqui como é que ficou parece que ela tá com um certo bem grande aqui Então como que a gente faz para ela caber dentro dessa área ela se ajustar dentro dessa área que a gente quer trabalhar a gente vai usar uma outra propriedade se chama deck ground o background traço size é o tamanho O que é qual o tamanho que eu quero eu tenho contém e o cover aqui
para escolher seu escolheu contém Olha o que que vai acontecer vou dar um controle se ele apareceu aqui o background mas começou a repetir ele aqui porque ele não se encaixou não se enquadrou totalmente nesse meu elemento certo agora se eu uso aqui o cover Olha o que que vai acontecer aí ele já tentou adaptar aquela textura aquele fundo certinho o tamanho do meu elemento agora eu vou deixar aqui o contém só para vocês verem uma outra propriedade que a gente pode usar com background que é a background repeti você vê que ele está repetindo
aqui certo olha só que que eu posso fazer eu posso determinar que esse fundo eu não quero que ele repita então ponha background repeti e aqui eu coloco que não quero no repite não quero que repita-se eu não control S Olha o que que vai acontecer ele não repetir o meu background e o espaço que ficou se quisessem sem o fundo que eu escolhi de imagem ele tá pegando aqui do background-color então eu determinei Qual é a cor se a imagem não pegar toda a área então ele vai fazer assim agora eu poderia também pedir
para ele repetir essa imagem usando o kit se eu coloco repeti ele repete a imagem e eu posso ainda passa aqui repeti traço x que é para ele repetir a imagem nesse sentido ou repeti traço Y para ele repetir a imagem nesse sentido no caso aqui ele é repetir aqui para baixo se tivesse uma altura maior então se eu colocar aqui um 600 de altura Olha lá ele já tá repetindo para baixo esse meu é esse meu fundo esse meu background agora é só colocar aqui eu repeti só e aqui já não vai aparecer ele
tá repetindo para lá então se o tamanho formei na hora aqui ó e olha já vai aparecer a repetição aqui certo então você tem o controle de repetição isso daí é o Rebite agora se eu coloco o cover aqui ó ele vai pegar toda a área tentar encaixar aqui mas eu posso dizer qual posição que eu quero que ele apareça aqui então eu poderia usar aqui eu vou colocar um novo Pit né para não repetir e não repeti ó e aqui eu poderia é determinar Qual que é a posição que eu quero que seja mostrada
aqui então poderia colocar senhor background traço position whose são que eu quero e aqui eu posso colocar centro direita e esquerda topo então se eu colocar aqui por exemplo assim ó Center a hora que que vai acontecer você viu que deslocou vou tirar aqui para você ver sem salvei Olha tá mostrando Alice eu coloco centro ele vai e vai mostrar o miolo da imagem aqui agora se eu coloco top que a parte de cima olha que que vai acontecer ele vai mostrar a parte de cima talvez com esse tipo de background aqui não fique tão
claro isso daqui deixa eu mostrar para vocês um outro exemplo Vamos pegar uma outra imagem aqui para ficar mais claro o uso dessa propriedade vou pegar lá que cidade pegar um fundo de uma cidade aqui só para ficar bem mais fácil da gente conseguir enxergar deixa eu ver alguma que seja bem legal Zinho aqui a pode ser essa daqui mesmo nessa cidade vou baixar eu vou até vou escrever sem a fundo só o fogo salvei beleza e vamos restaurar aqui ó e aqui eu vou trocar de background para fundo Eu salvei olha lá e quando
a gente dá um cover ele tentou encaixar aqui dentro o conteúdo certo mais claro a imagem é maior do que o conteúdo a área que eu posso estar trabalhando aqui então o que que acontece se eu colocar aqui top ele tá pegando a parte de cima se eu colocar Center e ele tá pegando mais o miolo Se eu colocar rite quer dizer que ele vai pegar mais à direita da imagem se eu pegar left e vai pegar mais à esquerda da imagem aqui daí nesse caso não né mas é você indica a posição que você
quer então vou colocar assim Center mesmo só para dizer que eu quero a posição central dessa imagem ela vai tentar se adaptar aqui dentro do background-size né que a gente tem cover a gente tem a gente poderia colocar aqui por exemplo 100% Oi e aí vai dar a mesma coisa que o cover praticamente né então a gente pode usar essas propriedades aí certo para a gente trabalhar com fumo Então a gente tem o Collor que é uma cor sólida a gente tem um background-image que é para passar uma imagem dela que a gente quer que
o background-size que é para dizer o tamanho da imagem de fundo que a gente quer que apareça aqui né a gente pode colocar aqui cover ou contém Lembrando que isso aqui é uma imagem de fundo né pessoal desse meu elemento eu poderia por exemplo colocar conteúdo aqui dentro dessa Jimmy por exemplo um parágrafo aqui não p Lauren aqui ó bom e o que que aconteceu é que ele ia aparecer aqui dentro dessa dívida que o fundo aqui então ele fica de fundo por isso se chama background que tá atrás né tá entendendo eu poderia usar
isso aqui como por exemplo um fundo para minha página e tudo mais mas geralmente quando a gente usa assim essas coisas de fundo ele pode dar um efeito meio estranho aqui na parte de leitura tem que usar com sabedoria essa questão dos background sakineh desses funguinhos agora é em vez da gente usar todos esses componentes aqui que a gente tem um background Cola é uma cor sólida o background-image pré uma imagem tamanho repetição ou não Oposição a gente poderia fazer tudo isso daqui numa só a expressão in CSS a gente não precisaria fazer tudo isso
daqui se deforma separado a gente poderia usar o chamado short Hand ou um atalho para ficar mais fácil da gente fazer tudo isso daqui como que eu faria é assim ó passando a propriedade a fraude os dois pontos aqui eu posso colocar uma cor sólida para começar então eu vou usar a Grey eu tô usando o background Colour Grey beleza Dom espaço e aí eu coloco Qual é o URL da imagem que eu quero então poderia colocar aqui esse daqui né vou até copiar para ficar mais fácil pegar e essa imagem então eu tô falando
que o fundo vai ser cinza não ele pega a imagem aí eu posso passar ali o próximo parâmetros é para repetir ou não vou colocar no repite não é para repetir eu vou querer que o alinhamento seja ao centro tá vou colocar Center assim única coisa que a gente teria colocar por fora mesmo seria o background-size cover e daí já vai ficar tudo certo vou deixar vou apagar esses aqui a pagar esses daqui vou colocar esse aqui para parte de cima é de um control é se você vê o que não mudou praticamente nada todos
aqueles componentes que eu coloquei então funcionando num só certo que é o background a gente passou todos aqueles parâmetros num num CSS sono uma expressão aqui só né para gente poupar código fica mais fácil a gente fazer dessa maneira o background na prática tá pessoal a gente usa mais para essas duas coisas então você pode colocar direto assim background Grey vai dizer que eu quero que o background seja cinza uma cor ou poderia colocar direto aqui também a imagem o URL E aí eu passo onde que tá essa minha imagem MG e MG background salvei
já vai aparecer lá né aí só colocar o background faço size cover para se adaptar E aí ele já se adaptou ali aquela parte Beleza então essa é a nossa propriedade de fundo a propriedade e a gente pode usar color image with each position size ou então de uma vez só usando simplesmente background passamos parâmetros aqui dentro beleza Um forte abraço e até a próxima aula onde a gente vai aprender um pouco mais das propriedades CSS Valeu Espero que você tenha gostado dessa aula que tenha te ajudado se você quiser continuar assistindo o curso pode
continuar clicando num desses cargos que estão aparecendo aqui deixa o seu gostei se inscreve no canal para não perder nenhum conteúdo sobre programação web e a gente se vê no próximo vídeo valeu
