Configurando a posição da imagem no fundo do site - @Curso em Vídeo HTML5 e CSS3

[@_Victor-Lourenco]

Como nós já sabemos, o ponto de partida *padrão* do bloco de imagens de fundo... A posição de referência de início das repetições, é sempre no canto superior esquerdo (left top). Entretanto, podemos mudar esse comportamento padrão e alterar a _POSIÇÃO DE REFERÊNCIA_ de início das repetições de forma personalizada. Para fazer isso, usamos a Propriedade de Estilo " *background-position* ", essa propriedade configura como e onde a imagem de fundo é posicionada. Essa propriedade aceita _NOVE VALORES_ diferentes, que são: *_VALORES PARA O TOPO DA CAIXA:_* *left top* (canto superior esquerdo) *center top* (canto superior central) *right top* (canto superior direito) *_VALORES PARA O CENTRO DA CAIXA:_* *left center* (centro esquerdo) *center center* (centro centro) *right center* (centro direito) *_VALORES PARA A BASE DA CAIXA:_* *left bottom* (canto inferior esquerdo) *center bottom* (canto inferior central) *right bottom* (canto inferior direito) Sempre *divida visualmente* em _COLULAS E LINHAS_ a *caixa* que você quer aplicar um background. Colunas - (Coluna Esquerda, Central e Direita) Linhas - (Linha do Topo, Centro e Base). Na hora de inserir os valores na propriedade "background-position", lembre-se que *primeiro indicamos o valor para a coluna e depois para a linha.* Exemplo do uso da propriedade: *div {* *background-image: url(imagens/exemplo.png);* *background-repeat: no-repeat;* *background-position: right bottom; /*COLULA DIREITA E LINHA DA BASE*/* *}* Para a propriedade background-position, existem *valores alternativos* às sequências usualmente aplicadas e descritas acima ( coluna / linha ), que são inseridos de forma única. O valor "center" algumas vezes é irrelevante para o "background-position", já que quando inserimos os valores right, left, top ou bottom de forma *ISOLADA,* o center já é usado como padrão. *Exemplo:* Valor usualmente aplicado: background-position: right center Valor simplificado: background-position: right Os dois valores do exemplo apresentado acima darão no mesmo resultado de posicionamento... Ou seja, o "center" acaba não valendo de nada se o segundo valor for right, left, top ou bottom, visto que ele já é usado como padrão nessa circunstância (valor único isolado). O conteúdo vai ser alinhado ao centro pela direita... A mesma coisa aconteceria se fossem os valores bottom, left ou top de *forma isolada* no lugar de right, eles seriam alinhados ao centro. Usando a Propriedade de Estilo apresentada acima e os seus valores, nós conseguimos mudar o *Ponto de Ancoragem* das imagens de fundo. *Importante:* No nosso background, só vamos ver a imagem de fundo *se mover por completa* de um canto para o outro, caso a dimensão da caixa seja maior que o tamanho da imagem. Caso a imagem seja maior que a dimensão da nossa caixa, veremos apenas uma diferença no Ponto de Ancoragem dessa imagem dentro da caixa (outra parte de imagem como background). *Nota:* Algumas vezes, principalmente quando usamos o body, temos que mexer na altura do mesmo ( *vh* ) para realizar os nossos testes de imagem como background... Já que por padrão quando ele não tem conteúdo fica totalmente achatado, inviabilizando testes de posicionamento.

[@brazilianmmalegend]

Ao invés de botar o { height: 98vh; } para não aparecer a barrar de rolagem, basta colocar normalmente { height: 100vh; } e acrescentar a declaração { margin: 0px; } no interior do seletor body. Assim não é preciso ficar testando os valores de vh para cada navegador, devices e suas variações. . O que faz aparecer a barra de rolagem é o body que vem com uma margem padrão. Ao colocar o height do body, que está com a imagem, para 100% da área de visão, o navegador acrescenta mais um espaço em branco que é essa margem, portanto a rolagem aparece, porque o body passa a ocupar 100% da área do navegaor + margem. Depois é só centralizar a imagem com { background-position: center center; }

[@UkuleleNaoÉCavaquinho]

legal man vlw

[@leonardobraga271]

Aulas

[@adrijzz]

Exato, o tamanho do height normal é 100vh.

[@tiago.sampa_]

📝 NÃO ESQUEÇA: *Posição da imagem:* background-position: posição horizontal posição vertical Ex: background-position: left top; -> esquerda topo Background-position: left center; -> esquerda centro background-position: right bottom; -> direita embaixo background-position: center center; -> centro centro Obs: vh -> altura da view port (height) vw -> largura da view port (width)

[@DiogoH139]

Algo que o professor não acabou falando, mas que pode ser muito útil em alguns casos, é poder utilizar "px", no lugar das referências como "left" e "center", sendo o primeiro px para a posição X e o segundo para a posição Y. Força para terminar o curso! ✊

[@yDansz]

irmão te amo, to a 2hrs tentando ajustar imagem na tela. em 2 minutos do seu video eu consegui ajeitar. Muito Obrigado !

[@anavitoriaalmeidadasilva2938]

Está tudo ok aqui. Dica: se você colocar background-position: 50%; ela fica centralizada bem no meio da página.

[@alantchunay]

2:50 um dica galeraaaa pra facilitar nessa parte você pode colocar " div.bloco*3 " que ele vai criar automaticamente 3 casses (ou mais) predefinido com a classe bloco :D

[@risadascomafonsovicente7761]

Amei a aula Sou de Angola e ainda não sei como posso apoiar o canal daqui Se tiver como me avisa Bom trabalho e força aí

[@luckingbr2047]

Aii minha vuaidaaaa

[@luckingbr2047]

Quanto custa comprar um leão ai na angola?

[@luckingbr2047]

@@SoldadoComProposito isso da equivalente a uns 2 reais

[@luizasantos6614]

vira membro

[@diogoxavier3287]

Essa altura do body achatada foi troll.. Por isso meus testes fora do curso ficaram com fundo zoado e eu não me liguei que era isso. kkk Vlw prof.

[@MilionarioDigitalMKT]

KZbin tá notificando rápido kk, vou ver o vídeo quando eu acordar tô querendo aprender a desenvolver uns sites 🤓, melhor canal de cursos do KZbin, com os melhores cursos 🤪 já fiz o de pyton professor Guanabara só falta pegar meu certificado

[@renatoorosco]

Como anda seu aprendizado?

[@Gabriel-ny2om]

guanabara é um genio da didatica

[@Ivairquirino1]

Top demais essa aula, aproveitei pra treinar um pouco de JavaScript . Criei um script que altera o background-position ao clicar no body.

[@aleixo1992]

boa, estou pensando em começar com o JS no próximo módulo

[@pereirasamuka2674]

Galera só uma dica. Vcs podem usar a extensão Live server para ver as alterações que você faz no seu exercício sem precisar ficar atualizando o Chrome.

[@MateusPaulino-w9y]

boa eu uso

[@tvsamuelsantos]

Mano, isso aí ajuda demais naquele desafio do astronauta no espaço, ele deve ficar exatamente no meio e eu não sabia como fazer isso, e agr eu sei!! vlw msm prof guanabara 😁

[@Familyhayzn]

meu melhor professor desde 2018

[@casagrandesky4670]

parabéns pelas exceletes aulas e cursos, Deus abençoe a sua vida.

[@waldirjunior1414]

Para que o vscode busque o caminho da imagem basta colocar no ../ no início EX: backgroud-image: url("../");

[@waljoshamarsphost6820]

./ vai procurar arquivos na mesma pasta que está o arquivo q tu esta mexendo ../ vai procurar arquivos na pasta acima da pasta que está o arquivo q tu esta mexendo Exemplo: Imagine a sequencia de pastas, na qual a pasta seguinte está dentro da anterior, e pastas diferentes dentro de uma mesma pasta estão separadas por vírgulas. curso => html-css => exercicio22 => imagens, index.html, imagem1 Se você está editando um códico no editor em "index.html", e quer que a url procure alguma imagem dentro da mesma pasta onde está o "index.html", tu precisa digitar ./ Quando digitar "./", vai abrir automaticamente a opção pra tu selecionar "imagem1" ou "imagens". Se tu quer a "imagem1", basta selecionar, mas se tu quer alguma imagem q está dentro da pasta "imagens", tu seleciona a opção "imagens" e seleciona a imagem. Agora suponha que exista alguma imagem na pasta "html-css", ou seja, a pasta "html-css" possui "exercicio22" e alguma imagem, vamos dizer "imagem2" como arquivos. Dai se você está em "index.html", você precisa digitar ../ Da mesma forma, irá abrir automaticamente a opção pra tu selecionar "exercicio22" ou "imagem2", dai tu seleciona a imagem. O exemplo do colega de cima cai aqui, ai você teria q selecionar "exercicio22" e depois selecionar "imagens" e só dpss selecionar a imagem q tu quer. Pra finalizar, suponha que tenha a "imagem3" na pasta curso, ou seja, dentro de "curso" estão as pastas "html-css" e "imagem3", e tu está digitando em "index-html". Dai agora você precisa digitar na url ../../ E assim por diante. Resumindo: ./ (mesmo nível) ../ (nivel acima) ../../ (nivel acima do nivel anterior) ../../../ (nivel acima do nivel anterior) etc

[@giodosvani]

hoje em dia o VS Code atualizou e o CTRL + Espaço já funciona nessa propriedade

[@BrunoTav]

Mais uma excelente aula desse curso incrível!

[@francielenarciso7]

guanabara sempre nos salvando .Obrigado.

[@luizfabianosilva6759]

4:55 já aviso logo, que não é necessário, colocar o componente e depois o id ou classe, tipo assim: ```` div#qualquer{ } ```` só basta colocar o id somente que dá no mesmo, mas ai já é costume, cada um pega o id da forma que quer, só queria dizer que se quiser, só basta colocar o id de uma vez que já pega, assim: `````` #qualquer{ } `````` só isso mesmo, eu não sei se tem diferença (provavelmente não) mas tá ai, tenham um bom dia

[@luizfabianosilva6759]

detalhe: estou falando do css.

[@Lucas-di6hb]

Isso provavelmente é para se achar melhor em um projeto grande. Essa div poderia ser um input e assim por diante. Se não me engano ele já falou sobre isso no começo do curso. Mas realmente os dois modos funcionam !

[@luizfabianosilva6759]

@@Lucas-di6hb isso é mais pra semântica então, tipo em linguagem go, em que tem umas formas de declarar variaveis. mas como dito, as 2 funcionam, se tem diferença, vai depender se o programador quiser mostrar um código pra alguém

[@ramonbosi1638]

@@luizfabianosilva6759 Na verdade existe sim uma pequena diferença entre as duas formas de selecionar um elemento HTML, diferença essa que é a "Especificidade" Não acompanhei o curso desde o inicio então não sei se o Guanabara falou sobre "Especificidade" Nessa situação ambos os seletores "div#qualquer" e "#qualquer" se referem ao mesmo elemento HTML, isso é fato Só que o seletor "div#qualquer" tem uma especificidade maior que o "#qualquer", isso acarretara que o CSS dará prioridade para executar o bloco do seletor "div#qualquer" podendo sobrepor propriedades presentes no seletor anterior Talvez ficou confuso a explicação, por conta do seu comentário girar em torno da especificidade de seletores CSS que por si só não é muito fácil de explicar kkkkk

[@ChristyanBrayan]

@Luiz Fabiano Silva ele falou isso no começo do curso

[@lucciwolfgamer]

Melhor professor na moral

[@elielmarqs]

Finalizado. Exercite o exercício 3, 4 e 5.

[@rc.artonline]

Professor incrível

[@tiago.sampa_]

Daí você paga 8 conto, em um curso de um cara super gênio, que não sabe passar o conteúdo de forma clara. Você não aprende, fica frustrado e desiste achando que não aprendeu pq vc é burro. Enquanto isso, esse cara ensina com essa didática impecável e sem cobrar um centavo sequer. Por fim, a galera assiste o curso dele sem deixar uma like sequer, nem se inscreve no canal! Injusto não!?

[@jonasadl1112]

E pra ajudar, você e o Victor-Loucenco contribuem com excelentes observações de cada aula. Muito obrigado! Desde o começo do curso eu dou like e tento comentar em todos.

[@oompa-loompa]

Aula sensacional! Obrigado.

[@toddynho_0139]

Aula incrível

[@spoderpoder224]

Obrigado professor

[@UniversoDigital]

Show, Guanabara.

[@patriciasantana1717]

Ótima aula! 👏👏👏👏

[@Palatinado0311]

muito bom amg vc me ajudou muito!!!!

[@GuilhermeSilva-yp4fe]

ótima aula!

[@carolfreitas_devjr]

Aula perfeita, isso nem em curso pago eu consegui achar.

[@pauloreducino]

Excelente aula, precisei colocar um max-width: 1000px; porque as imagens estava ficando com bordas da própria imagem kkkkkk

[@isadorags]

aqui também!

[@navegandoemc0d1gos]

Valeu! Tive o mesmo problema

[@adrianolaheto]

Eu faço não no fundo do site, mas no fundo de uma section, geralmente faço uma section de inicio com um banner logo abaixo do header.

[@kawemonteiro2671]

Curso toppp!!!!!

[@osvaldoaurelio]

7:40 isso ficou muito bom

[@julliopereiraa]

sensacional

[@aprendizdefunileiro9281]

Também tem como ajustar o background-image onde você quiser: background-position: left 10px bottom 10px;

[@andretakayama2088]

Excelente

[@wesleysouza4677]

Fazendo uns testes aqui notei que o Center algumas vezes é inútil, já que quando colocamos 1 propriedade ele já usa como padrão o center. Ex: background-position: right center; Se vc colocar: background-position: right; ele praticamente funciona da mesma forma, ou seja, o center acabou não valendo de nada se o segundo já faz o que o primeiro fez por poadrão, o conteúdo vai ser alinhado ao centro pela direita, a mesma coisa acontece com bottom, left e top quando usamos apenas 1 propriedade.

[@TalkWave_e]

É um curso explicativo, para não confundir iniciantes, ele explicar da forma mais clara possível.Mas no final, vai ser códigos do mesmo jeitokk

[@viniciusamorim72]

Quem não conseguiu o link do mascote: raw.githubusercontent.com/gustavoguanabara/html-css/master/imagens/mascote.png

[@JoelHolanda_]

Bora

[@diegoportella8175]

Sou assinante do Estudonauta, terminei os 3 módulos de HTML5 e CSS3, gostaria de saber se esse conteúdo vai sair no Estudonauta também.

[@vitor.franca]

@Maicon Douglas No Estudonauta sempre tem esse benefício de vc poder assistir as aulas antes de saírem aqui no KZbin, é uma forma de compensar os assinantes da plataforma.

[@bryanp.martins8108]

qual a diferença do estudonauta para o curso em video?. Eu entrei no site, mas todos os cursos do estudonauto são os mesmos do curso em video

[@RobsonDanger]

@@bryanp.martins8108 pelo jeito a diferença é que lá só tem como assistir sendo assinante, já no curso em video é possível assistir de graça, e mesmo assim emitir o certificado.

[@gabrielgameplay6274]

Caramba o video saiu meia noite agora entendi pq n tinha tanta visualização

[@Felipe.20]

Uma duvida ao pessoal dos comentários que já me ajudaram muito. No fundo004 ele colocou o Style fora da tag , o que isso pode causar de problemas dentro no código futuramente ?

[@Felipe.20]

@teligaso2682 entendi, Valeu 👊

[@beaalo3]

Nice

[@renanpassos.oficial]

👏🏼👏🏼👏🏼

[@jefferson8055]

'.bloco#q$*4' sem aspas + tab para criar as 4 divs com a classe bloco, e com id q1 até q4

[@LeandroSilva-zh3lj]

ótimo vídeo !! como eu faço para inverter uma imagem de background no css/ @media? abraço.

[@rydekiryuga6050]

Se eu assinar a Hostnet vc vai ser meu professor la ? se sim eu assino quando acabar o basico aqui

[@DiegoAdler]

está faltando as marcações nos videos, começou a faltar a partir desse ultimo vídeo.

[@alantchunay]

não esqueçam de seguir o professor naquelas redes que tem "arrobas" kkkkkkkk

[@na_panfletos_e_cartoes]

11:06 posso estar falando besteira mas se eu zerar globalmente o body com *{ padding:0; margin:0; } Não resolveria esse problema?

[@Houlz]

Sim. Resolveria.

[@TalkWave_e]

Não, pq aí vc estaria deixando sem espaços na margin e padding. oq ele queria fazer era centralizar a linha e a imagem juntos, Margin e Padding não fariam isso.

[@navegandoemc0d1gos]

8:43 censura 👀

[@simonimoura5288]

Oi gostaria de saber se algum video em que ensina como colocar borda em volta do texto dentro da imagem

[@GuilhermeSantos-yr2be]

Guanabara Boa noite, fiz o curso de js,HTML e css no site. Teremos aulas específicas de react aqui no canal?

[@RafaelOliveira-ho4sb]

O canal não ensina sobre frameworks, no Free Code Camp possui material de React gratuitamente

[@renatoorosco]

@@RafaelOliveira-ho4sb Voce já fez algum curso do FreeCode Camp?

[@RafaelOliveira-ho4sb]

@@renatoorosco até iniciei um de Design Responsivo, porém não cheguei a concluir.

[@sensiclipes4391]

Uma duvida seu eu terminar todos os módulos disponíveis eu vou ter a base do HTML e CSS

[@michel4690]

Se terminar e entender todos os 5 módulos desse curso, já pode se considerar um profissional.

[@rafaelcampanincarneiro3553]

up

[@REFLEXOES6]

O que é uma div é uma id

[@mrsamgames9050]

Estou com um problema, por algum motivo, nenhuma imagem que eu coloco no site aparece no Github pages, as imagens estão no repositório, o código delas aparece no código fonte da pagina, mesmo assim elas não aparecem no site.

[@GabrielaAraujoPaiva]

Estou com o mesmo problema, conseguiu resolver?

[@rubenscj4772]

fico perdido com os capítulos . nunca sigo a sequencia correta

[@youtubegoogle2979]

porque minha imagem ta um pouco diferente?

[@wydrianmatheus3802]

Quando vou colocar o body com 98vh e a borda dashed, minha tela fica escura :')

[@franklinferreira4908]

Os meus divs#q1 em diante não está funcionando, só está ficando a mesma imagem, o que pode ser ?

[@TalkWave_e]

Ou vc não fechou "div#q1 { }" Ou vc esqueceu do ";"

[@MatheusSantos-di3qd]

Por algum motivo minha imagem não aparece

[@eduardorosa2644]

[@MateusPaulino-w9y]

gustavo guanabara eu to aqui fazendo seus exercicios e eles nao ta funcionando estao com errros no exercicio fundo003.html nao aparece nenhuma imagem e no exercicio fundo004 posicionamento o mascotepng la seu nao fica no meio da tela coloquei igual teu exercicio porfavor veja isso e veja o pq disso eu sou iniciante na programaçao kkkkk mais mesmo assim to fazendo aqui e indo pros proximos ok vlw flw

[@Yas-yb1yt]

Acho q o canal tá com algum bug, postando vídeo a essa hora 🤔

[@heckmir]

Depois da meia noite paga só 1 pulso

[@franciscodeassisgomesdasil5054]

Legal, porém escasso, como se estivesse ficando para trás. Para comparar, aprendi mais ou menos o equivalente dos últimos 3 dessa série em 1 de outro canal, é só usar a pesquisa de playlist sobre esse tema, playlist já completas.

[@vitorgarcia5005]

Isso pode ser positivo ou negativo se for pensar. Eu acho também que um vídeo inteiro de quase 10 minutos pra só um comando, ainda mais sabendo que demora para se lançar outros vídeos, é algo "escasso". Porém, se vc pôr no 2x, e já tiver a playlist do módulo completo pra assistir, tu tem toda a aplicação da didática do Guanabara pra te explicar conceitos simples, e realmente "grudar" eles na tua cabeça. E considerando que muitas coisas ele fala pra pessoas totalmente iniciantes com computadores (dá exemplos de como encontrar pastas, como copiar e colar textos ou paginas, e etc), faz todo sentido que um vídeo inteiro seja só sobre um comando, pra fixar bem pra pessoas com mais dificuldade. Acho que me expus meu ponto mal pra cacete e de forma bem prolixa, mas deve dar pra entender.

[@kayo294]

o que pode ser quando a imagem de background carrega rapidamente e depois some