Mudando o tamanho da imagem de fundo do site - @Curso em Vídeo HTML5 e CSS3

[@tiago.sampa_]

📝 *Mudando o tamanho da imagem de fundo do site* background-size: 100% 100%; -> preenche a tela, mas achata e distorce a imagem countain; -> a imagem é 100% exibida, com laterais vazias as vezes cover; -> cobre a tela toda mesmo que tenha que cortar a imagem

[@alantchunay]

esse cara ta em todo comentario kkkk

[@yarlenjohnatansousa779]

Pessoal, como consigo mexer na altura e largura de um vídeo, pois quero botar o video e do lado um texto, pore o vídeo fica muito grande e deixa pouco espaço para o texto.

[@alantchunay]

@@yarlenjohnatansousa779 o professor já citou dezenas de vezes sobre isso... Mas pra mexer na largura é " width: 600px " e altura " height: 300px "

[@kableup]

Você é foda

[@1DGabs]

Isso funciona pra vídeos também? Fui testar aqui com um vídeo e não rolou ;-;

[@vanortonvan6437]

Eu uso uma extensão no VS Code que se denomina Live Server, nela, a cada vez que for feita uma alteração no seu código o arquivo aberto no browser é atualizado, dessa forma você pode ver dinamicamente como estão ficando o seu arquivo.

[@dennisro93]

Instalei, mas aqui não funcionou...

[@felipejklx]

@@dennisro93 clica com botao direito no HTML no VSCode e vai em ''open with Live Server"

[@dani9153blue]

eu dei uma olhada nessa extensão, é bem bacana mrm vlw

[@luckingbr2047]

Fodase

[@JJ_in_da_house]

tbm uso, muito boa

[@brunamotta5911]

cai de paraquedas aqui mas vc me salvou de um problema q não conseguia resolver de responsividade. Obrigada GG

[@2viajantesnaestrada]

Bom dia Que os nossos dias sejam guiados e protegidos por Ele, que nunca nos desampara. Te desejo força, foco e muita determinação para enfrentar mais uma semana. Que Deus nos abençoe! Likeee 👍👍

[@isaacmartinezrizo]

amem.

[@misaelmatos7728]

Qual a necessidade de escrever isso?? Só pra ganhar like kkkkkkk mds vcs são deprimentes

[@kacyos_kleyton]

amém 😎😏🤪😜😉😛😋😃

[@caeet]

Já to começando a perceber que com a ajuda do HTML e CSS vou conseguir criar sites tão bons quanto os feitos no Elementor Pro (Talvez até melhores), assim que eu terminar o módulo 04 (O último módulo atualmente) vou partir para JS e PHP, para de fato criar um site bemmmm bemmm feito hehehe :). Muito obrigado prof Guanabara! Eu nunca tinha concluído mais de um módulo, pra falar a verdade eu te conheço desde os meus 8 anos por aí, eu sempre via você ensinando a programar e eu tentava acompanhar, mas eu fazia algumas aulas e desistia, depois comecei a aprender a programar em PAWN (Uma linguagem de programação para jogos GTA SA e CS:GO parecida com a linguagem C) fiquei uns 2 anos nela, agora penso em começar a desenvolver aplicações e talvez um dia me tornar Full Stack : ) no momento tenho 15 anos, quasee 16, eu te agradeço muito pelo seu trabalho = D.

[@JuniorLustosa-py3fc]

Como estao os estudos Hoje??

[@_Victor-Lourenco]

Voltando a falar sobre a Propriedade de Estilo " *background-size* ": Essa propriedade aceita quatro tipos de valores diferentes, anteriormente entendemos um pouco sobre o tipo de valor " *largura x altura* "... É importante destacar que, caso configuremos o tamanho da nossa imagem com esse tipo de valor (largura x altura), a dimensão especificada para a imagem será fixa na tela independentemente do tamanho da viewport (navegador), resultando em páginas não responsivas, em quebras de repetição ou bordas no background. É possível "contornar" isso inserindo valores em % (ex: 100% 100%)... Mas dessa forma, apesar de resolver o problema das quebras de repetição ou bordas no fundo, a nossa imagem ficará *DISTORCIDA.* Por isso não é muito recomendado usar esse tipo de valor (largura x altura) aplicado para o background, nem mesmo em %. Tendo isso em mente, vamos entender melhor sobre como funciona os outros três tipos valores nominais para a propriedade _background-size,_ que são: _auto, contain e cover._ *auto -* Esse é o valor *padrão,* se não determinarmos nada, é esse valor que vai prevalecer. Ele faz justamente a imagem de fundo ser aplicada na dimensão original. Dessa forma, normalmente a imagem fica com quebras de repetição ou bordas no background, ocasionando em um resultado não responsivo. *contain -* Muda o tamanho da imagem para que ela _sempre_ seja *totalmente exibida na tela,* sem nenhum corte. Dessa forma, geralmente a imagem também fica com quebras de repetição ou bordas no background, ocasionando em um resultado não responsivo. *cover -* Redimensiona a imagem para que ela _cubra todo o contêiner,_ mesmo que para isso ocorram alguns eventuais cortes ( *não tem distorção* ). Ele vai cobrir a tela inteira, independentemente do tamanho dessa tela, mesmo que pra isso tenha que *cortar* um pouco a imagem. Esse valor é o mais recomendado para se obter resultados responsivos. No fim das contas, não existe um valor absoluto que é sempre melhor que o outro, tudo vai depender do que você quer fazer. Se o conteúdo da nossa página for grande o suficiente para criar uma *barra de rolagem,* mesmo que a nossa imagem de fundo esteja corretamente configurada com um "background-size" valor "cover" e outras propriedades, ao scrollar para baixo, a imagem de fundo vai ter um comportamento de quebra de repetição ou borda no background... Mais adiante vamos ver como evitar isso. *Observação:* Quando usamos imagens de fundo, é natural pensarmos que não é necessário configurar uma cor de fundo... Entretanto, é sim recomendável que você *configure uma cor de fundo,* mesmo que posteriormente aplique uma imagem de fundo por cima dessa cor. Isso porque quando o nosso site é carregado, primeiro é carregado o conteúdo HTML, sendo interpretado pelo navegador, e só depois é que as imagens são encaminhadas. Primeiro chega o texto e depois as imagens... Então durante esse processamento, principalmente se o seu servidor estiver lento, pode ser que ele carregue o site (texto), e a imagem de fundo (que é um arquivo um pouco mais pesado) demore alguns segundos para ser exibida. Sendo assim, não é recomendado que você mostre o site branco e depois a imagem apareça... O ideal é que você coloque uma cor no fundo para que o usuário consiga já ir consumindo o conteúdo e aí sim posteriormente a imagem seja exposta.

[@felipehenrs]

Chat cantou

[@marinagueirosoficial]

To no capítulo 10 mas vim dar um Oi e agradecer muitooooo pelo conteúdo disponibilizado. VC MUDA VIDAS 👏🏽👏🏽👏🏽

[@mr.reverie1984]

e aí, terminou o curso?

[@gabrielmachado2019]

Como sua vida foi mudada? Poderia dar-nos um depoimento?

[@diegocostadelima1619]

Boa noite, estou falando de São Paulo, cara muito bom seu conteúdo me ajudou muito, pois estou começando na programação e esta tendo dificuldades sobre acertar o tamanho da imagem no site, mais pesquisei até chegar no seu vidoee me ajudou muito, muito obrigado de coração e parabéns pelo trabalho!.

[@lucasprimo17]

O melhor ever!!!!!!!!!

[@josygoncalves9531]

Só queria msm um pouquinho dessa sua inteligência, gênio!!!!;)

[@pedrophillipe]

só estudar e praticar ... n tem segredo

[@JoseCarlos-jv6cv]

muito obrigado pelo conteudo! me ajudou muito em um site que estou desenvolvendo pro meu curso de programador na facul! Deus te abençoe!

[@neuropunk4846]

Parabéns mestre obrigado por tudo !!!

[@semente.criativa]

Mais um conteúdo de muito aprendizado, só gratidão 🖖

[@vitorfontes4202]

Obrigado pela aula! Likee!!

[@lucasmallmanneich]

Craque da bola

[@isaiascaetano5888]

Esse professor é um monstro ahahhaha top d+ brigadão professor.

[@Familyhayzn]

top

[@jonasadl1112]

Obrigado por mais uma aula!

[@oompa-loompa]

Obrigado pela aula.

[@thiagoalexandre9420]

Tu é foda Guanabara!

[@lucasalexandre4269]

Guanbara parabéns pelo trabalho, você poderia dar alguma notícia sobre o mundo 4 de python

[@guilhermepassos2026]

Ótima aula

[@brunosa3505]

Sas hora Guanabara kkkk obrigado pela Aula

[@vilhalva100]

O meu repositório está bem diferente. Na minha opinião, muito mais organizado (Seguindo as dicas do Clean Code): HTML-CSS-JS / CURSO ({PRATICA}) / 19 - IMAGENS DE FUNDO / HTML ( {CSS} {MIDIAS} {FONTES} / 04) Posição da imagem.html.

[@isanagi.]

muito bom o video

[@GuilhermeSilva-yp4fe]

ótima aula!

[@pedrophillipe]

brabu

[@dinkyt2883]

Algum dia você pretende fazer um curso de lua?

[@thiagoapenaseu3252]

Caraca, eu caí aqui de paraquedas e só perguntando mesmo.. essa é uma atualização das aulas de HTML e etc?

[@Bitcoio]

Esse vídeo faz parte de um novo curso de HTML5 e CSS3 que foi iniciado em 2020. O curso inteiro terá 5 módulos, e neste capítulo ele está no módulo 3 ainda.

[@thiagoapenaseu3252]

@@Bitcoio aaahhh entendi, então esse curso substitui o antigo?

[@juniorjjr1843]

@@thiagoapenaseu3252 sim já que a versão antiga tá desatualizada

[@thiagoapenaseu3252]

@@juniorjjr1843 Aah entendi, vlw

[@ChandlerBing-t3k]

o u avião magricelo 🤣 🤣

[@jhonyfreitas6537]

Uma coisa que eu sempre quis saber como eu deixo meu navegador pra ir atualizando o fundo assim que eu for aumentando ou diminuindo a tela, o meu fica travado e só atualiza quando eu solto o mouse. Obs: Eu uso o Edge, não sei se influencia em alguma coisa.

[@guilhermechaves3833]

Solução para Windows: Vai na barra de pesquisa do windows e pesquise: "Exibir configurações avançadas do sistema", abra a primeira opção. Em "Avançado", você verá "Desempenho, Perfis de Usuário, Inicialização e Recuperação". Clique em "Configurações" na parte de Desempenho. Embaixo de "Ajustar para obter um melhor desempenho", clique em Personalizar. Procure nas opções a seguinte opção: "Mostrar conteúdo da janela ao arrastar", selecione ela, deixe a caixinha marcada, clique em ""Aplicar" e depois clique nos "OK" até fechar tudo. Caso isso não resolva, eu já não sei mais o que fazer pra te ajudar kkkk

[@augusto_santos12]

@@guilhermechaves3833Finalmente achei esse comentario nos videos, tava precisando fazer isso, valeu manozzz

[@waljoshamarsphost6820]

@@guilhermechaves3833 ajudou dmss man

[@cfharboe]

Bom dia, Gustavo; tudo bem com você? Como que coloca marca d’água de uma background-image que está na main ? Tudo de bom para você. Abraços.

[@explorandoomundo.oficial]

Fu ver minhas páginas assim e só funcionou o fundo01, as outras deram erro 404

[@lucasecs92]

também fiquei quebrando a cabeça com isso, é só colocar o caminho certinho das pastas..

[@JhonyRodrigues-q8i]

Hoje dia 04/04/2024, quando eu uso o height com 100vh, fica com a imagem na tela toda e não achata quando diminui a tela, acredito terem feito atualizações para isso.

[@brendalima811]

nao está dando certo quando tento acessar colocando na url a pasta exercicios, ta erro 404 e ja vi revi varias vezes e ta igual do guanabara :/

[@juh-kau]

O meu tbem :(

[@juh-kau]

Achei o erro no meu código! Estava usando aspas simples no URL do background image 😩. Assim que troquei por aspas duplas deu certo!

[@rafaelcampanincarneiro3553]

up

[@gambiarradeveloper4950]

10:33 ta bom professor desculpa por ter achado bonito

[@feliphe..]

ele tirou os tópicos, coloca de novo por favor

[@lorenalobo3071]

Onde consigo o material de apoio desse módulo?

[@talilotarlison]

no github do guanabara.

[@yarlenjohnatansousa779]

Pessoal, como consigo mexer na altura e largura de um vídeo, pois quero botar o video e do lado um texto, pore o vídeo fica muito grande e deixa pouco espaço para o texto.

[@p4uloc4rv4lho]

Não consigo abrir meus repositórios no navegador. Somente o projeto android

[@pavwos]

guanabara sem oculos, até o demonio treme

[@rodrigotessitore4259]

No último capítulo ele tinha ensinado apenas como publicar o projeto android e não a pasta exercícios inteira. Fiquei com uma imensa dúvida.

[@luccasamuel138]

no caso vc teria que fazer um "caminho" para cada pasta de cada exercicio, então além de publicar como pagina teria que fazer uma url para cada pasta de cada exercicio

[@alicesantos6097]

@@luccasamuel138 uma url para cada exercício, é isso?

[@luccasamuel138]

@@alicesantos6097 basicamente sim

[@andrek9999]

O cover não ta funcionando aqui 🙄

[@DevSttrong]

boa noite, como resolvo o problema de picotar parte das imagem. quero uma imagem 100% sem picotar nada, quero q ela pegar a tela 100% do jeito que eu baixei ela .... onde eu baixei ela eu vejo ela toda mais quando eu coloco no fundo e uso o cover ela picota muito

[@shortsandshorts-88]

Mais alguém não esta conseguindo enviar o link pras pessoas dos exercícios que estamos fazendo? Alguem sabe habilitar no github pras compartilhar os links?

[@rickxx761]

Mn, tu vai em "Settings", depois em "pages", depois em "branch" e muda para "main", confirma e espera um pouco para gerar o link. (N sei se está com o problema ainda, mas espero que já tenha conseguido aí, tmj)

[@shortsandshorts-88]

O manin, vlw pela força, tinha conseguido sim. Tmj

[@GabrielaAraujoPaiva]

Gente, alguém com o mesmo problema do background image aparecer no repositório local mas simplesmente não aparecer no Github? O meu exercício tá com a imagem de fundo, mas quando tento ver online no Github não aparece...

[@eduardorosa2644]

[@CrisdoSantos]

No meu ainda continua dando o erro 404 quando tenho acessar qualquer exercício da pasta. Ja voltei nos videos anteriores olhei os comentários, o caminho da minha pasta na parte de pages ja esta "main" e "root" mas o erro ainda persiste. Se alguém puder ajudar🥺

[@vitorac412]

Ja resolveu? Confere direitinho o caminho no link, se não tenta renomear como index.html e marcar o X em pages -> general -> templatelayout. Aqui no meu eu quebrei a cabeça também e era o link que tava errado.

[@olamidegameplays7719]

Vídeo tarde em Guanabara 😅

[@Thiago-sq9de]

kkkk,é mesmo.

[@Lucas-gz1ru]

Poxa, não consigo ver meu site pelo GitHub, sempre dá erro 404

[@brendalima811]

o meu tambem