HOW TO INSERT BACKGROUND IMAGE CORRECTLY - HTML & CSS
ฝัง
- เผยแพร่เมื่อ 19 ต.ค. 2024
- HOW TO INSERT BACKGROUND IMAGE CORRECTLY - HTML & CSS
Hey guys! I have read, in the discussion groups, that there is still a lot of doubt about the use of images as a background (#background) in #html pages. That's why I made this video that covers #CSS and HTML, the correct way to load the image, basic settings, etc.
So let's go
SUPPORT FILES
bit.ly/profLuis...
YOU CAN HELP THE CHANNEL WITH ANY AMOUNT VIA PAYPAL BY THE ACCOUNT
luisvulcanis@gmail.com
CONTRIBUTE WITH DOGECOIN TO:
DDCk3HzjvRzL6h5NrZox8fr8jZFpHCAzcA
OR ON BITCOINS TO:
bc1qws8d3e4ap88806asypehgqy2ry7fvk8x6ex34p
OR ON ETHEREUM TO:
0xAC717a1aA7448D999289C37bd18bA4144fd50F89
Cara entendi perfeitamente, comecei faz um mes a facldade te TI, estou fazendo um trabalho e não sabia como colocar a img de fundo muito obrigado mesmo vou te seguir sempre, Deus te abençoe..
Obrigado e que bom que ajudou.
Excelente vídeo amigo, precisamos sempre de pessoas assim para inspirar a nós desenvolvedores e professores, espero está no caminho certo. Continue amigo.👍🚀
Obrigado bro. Que bom que gostou. O negócio é seguir em frente. Para trás, nem para pegar impulso. Hehehe!
Muito obrigada. Eu tava a horas aqui quebrando a cabeça com o meu background, porque a imagem não aparecia mesmo colocando o link "certo", mas não fazia ideia que ainda faltava algo no caminho pra pasta. Obrigadissima, pois consegui resolver um dos problemas do projeto.
Que bom que ajudei
Finalmente um vídeo que explicou direito. xD
Que bom que ajudou
verdade, video muito top
A gente vendo o vídeo 2 anos dps kkkkk@@fabriciocarvalho6614
Maravilhoso!!!! Muito obrigada pelo vídeo e por toda a paciência de ensinar os detalhes.
Estava ficando doida com o erro de não encontrar a imagem, faltava apenas 1 pontinho pra ele sair da pasta e entrar em outra. Agradeço imensamente!
Obrigado. Que bom que deu certo.
113mil visualizações não são à toa. Muito bom o vídeo, simples, direto e com uma ótima explicação. Obrigado
Obrigado. Que bom que gostou.
Conteúdo bacana. Estou saindo do grau de iniciante para o média em HTML e esses vídeos assim ajuda e muito.
Quem bom que está gostando e obrigado pelo comentário
Isso Otávio, essa área e muito promissora, sempre praticando quando menos vc esperar vai está no.topo
Estou muito feliz de ter encontrado a solução do meu "problema" (minha persistência me ajudou, estou no caminho certo) muito obrigaaada!
Que bom que ajudou. Tem bastante conteúdo aqui no canal. Espero que seja útil.
excelente didática, estava procurando umas referências para inserir a img em uma aplicação spring, deu certo a pesar que não sou muito bom de front, seu vídeo foi de extrema relevância, obrigado!
Obrigado. Quebom que foi útil.
Muito obrigado por demonstrar e compartilhar sua experiencia e conhecimentos aqui com a gente. Excelente video, em menos de 3 minutos me ajudou e muito no andamento do meu projeto. Deus abençoe e e tmj junto .
Eu que agradeço
cara, muito grato pela explicação simples e eficaz, resolveu meu problema valeu mesmo.
Que bom que ajudou
Excelente vídeo! A dica de como puxar a imagem de fora da pasta do css com .. foi muito precisa.
Obrigado, Que bom que foi útil.
Esse hover ficou a coisa mais lindaaaa! Amei a aula Muito obrigada.
Obrigado. Que bom que gostou.
Me ajudou muito, obrigado!!
Tinha que fazer um site pra faculdade e não estava conseguindo ajustar o plano de fundo...
Que bom que ajudou. Grande abraço!
Obrigada, pelas explicações, foram muito úteis para meus estudos.
Eu que agradeço. Que bom que ajudou!
valeu.. minha imagem estava repitindo milhares de vezes kkk... o bkgd cover me salvou.. valeu demais
Obrigado. Que bom que ajudou.
eu estava tendo dificuldade com a localização da pasta mto obrigado ajudou mt
Que bom que ajudou
Muito obrigado. Por causa daqueles dois pontinhos estava ficando louco!
Pode crer. As vezes um pequeno detalhe muda tudo. Que bom que ajudou.
Aula sensacional, melhor explicação que encontrei e não podia ser melhor. Obrigado e parabéns pelo conteúdo.
Eu que agradeço. Que bom que foi útil.
Vidoe incrível, oratória de facil compreensão obrigado 🙋🏻♂️
Eu que agradeço que bom que gostou
Já dei um Joinha, muito obrigado pelas dicas.
Obrigado! Tem bastante dicas no canal. Valeu!
bah tche vlew mesmo, ótimo video, estava custando a achar alguém que explica-se a situação das pastas diferentes, muito obrigado
Valeu Bro. Que bom que ajudou.
Muito bom vídeo! Direto, objetivo e esclarecedor! Parabéns e obrigada!
Eu que agradeço! Que bom que gostou!
Resolveu meu problema em menos de 4 minutos parabéns amigo!!
Fiquei com uma duvida só, como deixa a imagem mais opaca pelo CSS?
Neste vídeo ensina como fazer: th-cam.com/video/ZHD8xGw8VCA/w-d-xo.html
tks guerreiro o meu tava dando erro para por a imagem e você ajudou muito
Bacana. Que bom que ajudou....
Outubro de 2021, dica exata! Parabéns!
Obrigado. Que bom que gostou.
muito bem explicado. a imagem não estava aparecendo no meu projeto
Obrigado. Que bom que ajudou.
salvou dms mestre! Tô no caminho, mas as vezes esqueço umas coisas bobas.
Isso faz parte. Podemos ter anos de prática mas sempre estamos consultando a documentação.
Valeu de coração 😭, foste o primeiro a explicar do jeito certo
Que bom que ajudou.
Muito obrigado professor, resolveu o meu problema, parabéns pelo conteúdo atualizado.
Disponha! Que bom que ajudou.
Boa tarde!! Muito obrigado pelo conteúdo, eu dês de ontem estou tentando colocar uma imagem, mais no meu caso é só 50% da página não é no body todo, eu já quebrei cabeça o dia todo, eu tinha tentado fazer de várias maneiras nada tinha dado certo, eu já tinha pesquisado aqui no TH-cam e nada, até eu acha o seu vídeo, nossa era só colocar vós dois pontos que eu saia da pasta do css e tudo de resolvia.
Muito obrigado mesmo
Opa. Que bom que deu certo!
Valeu amigo. Deus Abençoe, vc salvou minha madrugada
Que bom que ajudei
Sabia fazer com o img src mas me embolei com URL valeu - Deu Show!
Que bom que ajudou
Exatamente o que eu precisava.... Muito obrigado
Que bom que ajudou.
Você salvou muito agora, obrigado mano! Sério mesmo
Eu que agradeço. Que bom que ajudou.
Obrigado meu amigo. Vc é um amigo
Eu quem agradeço....
Objetivo e eficaz! Grato!
Valeu bro. Obrigado!
Que aula sensacional
Obrigado 😃que bom que gostou!
CARA, VOCE É INCRIVEL, OBRIGADO!
Obrigado Bro. Fico feliz por ter gostado.
Meu amigo, vc é fera demais
Obrigado. Que bom que gostou!
Muito bom prof. Didático e dinâmico.
Obrigado. Que bom que foi útil.
Professor Luis, vc é brabo demais! muito obrigado!
Opa. Obrigado. Que bom que gostou.
Muito obrigada. Excelente explicação. Parabéns, continue com o seu trabalho, me ajudou bastante!! 😁👏🏾👏🏾👏🏾
Eu que agradeço. Que bom que ajudou.
Simples e direto! Obg.
Eu que agradeço. Que bom que ajudou!
Excelente! Muito didático. Muito obrigado.
Disponha! Que bom que gostou.
Onde é inserido:
".nav-list li {
letter-spacing: 0.3rem;
margin-left: 2rem;
}"
não obtive o resultado esperado os menus ficaram um acima do outro, foi necessario criar um:
"ul {
display: flex;
}"
para que os menus se agrupassem lado a lado.
Ótimo tutorial, obrigado por compartilhar!
Legal. e obrigado pela seu comentário.
Excelente, objetivo. Obrigado!
Eu que agradeço pela sua audiência. Que bom que gostou!
Excelente explicação 👏👏👏
Obrigado 😃 Que bom que gostou.
Obrigado mestre, o cover foi de grade utilidade
Obrigado. Que bom que ajudou.
você me ajudou demais!! muito obrigado!
Que bom que ajudou. Eu que agradeço pelo comentário.
Cara me ajudou demais! Sensacional!
Que bom que ajudou.
Muito obrigada prof, salvou minha vida!! ganhou mais uma inscrita!!
Bacana, que bom que foi útil e obrigado pela inscrição.
cara vc é incrível muito obg
Eu que agradeço. Valeu o comentário.
velho resolveu meus Problema em 3:31 min. de video kkkkkkk estava esquecendo de colocar o ".." para direcionar o caminho da pasta kkkkk
Opa... que bom que encontrou a solução. Abraço!
obrigado Jô Soares
Hehehehehe. De nada.
Show de bola professor!
Obrigado. Que bom que gostou.
Obrigado! Ajudou muito
Que bom que ajudou. Eu que agradeço.
Amei a explicação !!!
Bacana. Que bom que gostou.
Me ajudou muito! obrigada
Que bom que ajudou...
Nossa me salvou... Ganhou mais uma inscrita.
Que bom que ajudou. E obrigado por se inscrever no canal.
Ajudou pra caramba, valeu meu velho.
Opa. eu que agradeço! Quem bom que ajudou!
Muito obrigada. Ajudou-me imenso!🙌
Que bom que ajudou
Muito obrigado!!
Eu que agradeço.
Resolveu meu problema!
Bacana. Que bom que ajudou.
Show de bola! Me ajudou muito. VLW
Que bom que ajudou.
Muito obrigado professor o senhor me ajudo de mais
Eu que agradeço. Que bom que ajudou.
Simplesmente me salvou
Opa. Que bom que ajudou.
Obrigado, me salvou!
Disponha! Que bom que ajudou.
Consegui! Obrigada!
Que bom que conseguiu.
ajudou muito amigo, obrigado
Bacana. Que bom que ajudou!
Muito obrigado
Eu que agradeço
vlw professor pela a dica!
Eu que agradeço. Que bom que ajudou...
@@temposesquisitos tem alguma escola com aulas gratuitas?
@@juniorlopes6040 Pode até ter algum material grátis. Mas tudo é difícil. Pois produzir conteúdo leva tempo, exige estudo, e tem outros custos. Um vídeo de 10 minutos demanda umas dez horas de trabalho e as contas não esperam.
bom vídeo, ótima explicação!
tem como usar dois background-size ao mesmo tempo?
por exemplo utilizar background-size: contain para a visualização no celular e background-size: cover para visualização no desktop, como eu faço isso?
Execlente! Ajudou bastante, obrigado!
Que bom que ajudou
🤔Ei Professor...!!!
E Pra Colocar Uma Imagem Como BG de um Endereço da Web,Como É Que Faz?
Tecnicamente é só substituir o endereço local pela url da mesma. Mas alguns servidores bloqueiam esta prática pois gera muito tráfego no servidor.
@@temposesquisitos
😱😱😱😱😱😱😱😱Ohhhhh My GOD...!!!
mano muito obrigado kkk eu nao sabia que precisa fazer ../ pra sair da pasta kkk por isso q eu tava que nem um maluco pondo o codigo e nao ia essa merda
Eu que agradeço. Que bom que conseguiu!
vídeo perfeito, obrigado amigo
Eu que agradeço. Que bom que gostou!
meus parabens pelo conteudo
Obrigado. Que bom que gostou.
Fiquei 3 dias travado nessa parte do background-image: url. O meu, começava SEM os "..", mas o código entendia e mostrava qual a imagem que era, no diretório certinho. Entretanto, na hora de visualizar o site, ficava sem imagem.
Ou seja, faltou adicionar " .. " antes diretório.
Ufa! Ainda bem que conseguiu. Grande abraço.
Nice !!! Encontrei o vídeo certooo
Que bom que ajudei
salvou meu projeto irmão , vlw dmssss
Que bom que ajudou
Muito obrigado cara!! me ajudouu
Que bom que ajudou.
MEU HEROI !!!!!
Opa, nem tanto! Kkkk... Mas muito obrigado...
fala pra caraca, mas me ajudou muitooo kkkkk like!
Hehehe nos vídeos mais recentes estou falando menos. Blz?
Muito bom!
Obrigado. Que bom que gostou.
Obg teacher 😎
Obrigado, me ajudou muito a ajustar minha imagem de plano de fundo, mas ai vai uma pergunta. Quando eu coloquei o background position o meio da minha imagem ficou na borda de cima da página, como posicionar ela em relação ao meio do documento?
Pode acontecer se a imagem não tiver altura suficiente. Mas no geral com imagens bem grandes geralmente funciona de boa.
@@temposesquisitos Muito obrigado pela resposta, ótimo canal!.
boa aula ajudo muito
Que bom que ajudou
Por causa de .. quebrei a cabeça kkk, obrigado !!
Opa! Que bom que ajudou.
seu video ajudou muito! mas se eu eu coloco para não repedir a imagem para de aparecer.
Olá. É bem estranho isso. As vezes é um detalhe bem simples: uma pontuação a mais ou a menos. De uma boa revisada no código.
oloco mano valeu ajudou mt slk tmj
Que bom que ajudou
Excelente!!!!
Obrigado.
Top demais, queria saber como deixa somente o fundo com opacidade, no caso o background, pois quando aplico a opacity fica tudo com opacidade mesmo tirando o texto da div
Eu usaria a propria imagem ja com a opacidadd desejada.
@@temposesquisitos então utilizaria por exemplo no body o background, então ficaria img src e no css modificaria do meu jeito certo?
Através do link src no html ou background image no css??
@@queias8517 Não meu caro! Embora seja possível adicionar fundo direto pelo HTML tipo: (), está é a maneira errada. A maneira correta é pelo CSS como está no video.
body { background-image: url(caminho_da_imagem); }
@@temposesquisitos ah sim muito obrigado, ajudou bastante, continue assim 👏🏻
Muito Bom!!!
Obrigado. Que bom que gostou.
Opaa, no meu código a imagem se repete varias vezes pequena, como posso manter uma imagem apenas centralizada de fundo?
Verifique se a imagem que você está usando não é muito pequena.
estou tendo um problema, pra mim ta apecendo a opcao de escolher a imagem, porem na hora que coloco nao muda nada na minha pagina, e ja linkei o HTML com o CSS
Provavelmente tem alguma coisa errada. Pode ser o caminho do arquivo, um erro de nome, uma tag não fechada, o cache do navegador. Enfim. A lógica é: Se funciona para os outros o erro está no código que você fez. Normalmente é assim.
Valeu, funcionou ❤😊
Que bom que ajudei
no caso se tiver no mobile vai pegar só o centro e se tiver no desktop ela mostra toda se adaptando a dimensão da tela correto?
Isso mesmo.
Você me ajudou demais
Valeu bro. Que bom que ajudou.
valeu muito obrigado
Eu que agradeço. Que bom que ajudou.