Curso de HTML #42 - Imagem de fundo com tamanho adaptável

Подписаться 221 тыс.

Просмотров 110 тыс.

50% 1

Curso de HTML #42 - Imagem de fundo com tamanho adaptável
Nesta aula iremos aprender como configurar uma imagem de fundo que se adapte ao tamanho da tela.
Site do canal
cfbcursos.com.br
Colabore com nosso canal:
Qualquer valor usando o PIX: pixcfbcursos@gmail.com
Página de cursos no site
cfbcursos.com.b...
e-mails:
perguntas@cfbcursos.com.br
canalfessorbruno@gmail.com
Outros Links:
Vídeo Colabore com nosso canal: • Video
Canal youtube: / canalfessorbruno
Instagram: cfbcursos ou @cfbcursos
Twitter: @cfbcursos
Facebook: canalfessorbruno
RU-vid: / canalfessorbruno
vakinhas
www.vakinha.co...
www.vakinha.co...
Produção: Bruno P. Campos / CFB Cursos
Edição: Bruno P. Campos / CFB Cursos
Licença padrão do RU-vid
#cfbcursos #html #cursodehtml

Опубликовано:

30 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 130

@gabrielgalvao6781 4 года назад

Background-size:100% 100% para altura e largura.

@marcostorres7690 4 года назад

Vlw, n sabe como vc me ajudou!

@gregoryguimaraes263 4 года назад

Obrigado!

@LetrasAdventistas 4 года назад

Obrigado, vc não sabe como eu tava atrás de uma solução

@hadjam1 5 лет назад

gostaria que voce tivesse mostrado como ajustar abaixo tambem mesmo que a imagem ficasse distorcida

@davidlimagames1535 3 года назад

tb queria.

@brunohenrique7606 2 года назад

@@davidlimagames1535 eu usei estes códigos e testei de várias maneiras, usando o zoom até 500% e a imagem de fundo ficava fixa: background-attachment: fixed; background-size:cover; background-repeat: no-repeat; height: 100vh; position: relative;

@philipphahmann5971 4 года назад

Parabéns, me ajudou no que eu estava precisando, um conteúdo criado há tempos, mas que serve atualmente.

@Jornada_Crista855 5 лет назад

//professor Bruno tudo que sei sobre JavaScript aprendi consigo obrigado. bom trabalho 💻

@jhana.2023 2 года назад

Professor Bruno é uma pérola que encontrei no RU-vid. Quanto conteúdo ! E descomplica tudo. Tudo sem mistério. Com boa vontade. Deus te abençoe muito.🙏🙏🙏🙏🙏

@laisrocha9249 3 года назад

top, era exatamente desse vídeo que eu precisava. obrigada!

@davisobreira7919 4 года назад

Glóriaa a DEUS!!! Me ajudou muuito!!!! DEUS te abençoe!!!!!! Nunca se esqueça: JESUS TE AMA!!!!

@priscillacorrea7993 4 года назад

Muito obrigada 🥰 estava procurando por isso e não encontrei tão bem explicado e simples como o seu vídeo... 🙏❤️

@krislaynenunes5000 3 года назад

Nao consegui, ja tentei varias tags, e nada, so consigo colocar uma cor sólida feia no fundo... 🥺🥺🥺🥺 aparece um link quebrado.

@flaviocosta4302 3 года назад

Muito obrigado acabou de salvar um leigo que depois dessa se apaixonou por html haha Deus Abençoe !

@guilhermerufino8593 5 лет назад

Alguém sabe alguma aula pra ajusta a altura q ele fala que e fácil ? O tamanho da galeria tá dentro de um script.... Tô tentando arruma isso no código e n consigo de jeito nem 1

@vandersonandrades 4 года назад

vlwwww caro amigo. você é das pessoas que soma!!!

@jonnystwart7832 3 года назад

MUIIIIIIIIIIIIIIIIIIIIIIIIIIITO BOM. Tanto a explicação, quanto o código. Meus Parabéns !!!

@maykonmaia6762 3 года назад

Top demais amigo, parabéns!

@davidlimagames1535 3 года назад

como ajustar abaixo : background-size: 100% 100%;

@Raffitch 3 года назад

Alguem me ajuda!!!!!!!! eu ja tentei colocar a imagem de todos os jeitos e não vai. ja coloquei o link, o endereço, e nada

@DanielTheory 2 года назад

Obrigado, era oque eu estava procurando, ja me inscrevi para seguir mais dica, vlw

@lordxplaygames707 6 лет назад

amei a aula estou anda aprendemo css e consegui entender o vídeo por ser muito bem detalhado obrigado me ajudou muito

@juliano_campos150 3 года назад

top meu amigo estou começando com a programaçao e me ajudou mt vlw

@RafaelSkadovski 6 лет назад

senão me engano os navegadores de agora por padrão deixam um espacinho de 2px como margem e pra corrigir isso se colocar margin 0px; no style ajeita certinho

@JeanCarloProducoes 7 лет назад

Boa noite! Primeiramente, muito obrigado por ajudar a comunidade com esse vídeo, e parabéns pela iniciativa do canal! Você sabe como faço pra deixar a altura proporcional tb? não me importo que fique achatado, pelo menos não nesse caso aqui... eu coloco em monitores maiores e fica a tarja embaixo, ai queria que não ficasse! mas compreendo a questão que falasse pra não achatar a imagem e tals, e concordo totalmente.. é que como a textura da imagem que to usando não tem muita definição e nenhum desenho significativo, vou usar achatado mesmo.. Você consegue me clarear isso? Mais um vez obrigado cara, pessoas como você ajudam a tornar nosso mundo melhor! =)

@cfbcursos 7 лет назад

use height="100%"

@wfgable 6 лет назад

Muito bem explicado... Parabéns 👏🏻👏🏻👏🏻

@jotah.pe_eu 3 года назад

VOCÊ É UMA LENDA!!!!!!!! MUITO OBRIGADO!

@antonicajose6487 6 лет назад

Obrigada, foi muito util para mim este video. Deus abençoe sua vida.

@weslenn.jr24 5 лет назад

Belas aulas professor. Parabéns

@rebecalima1573 3 года назад

como faz pra imagem rolar junto do texto???

@lucasandre82 7 лет назад

Boa noite! O meu código funcionou, porém o meu é um banner, e abaixo do banner possui conteudo. Meu problema é a altura da div, pois fica um espaço em branco entre o banner e o conteúdo. Já tentei deixar "auto" a altura nas divs envolvidas mas não funciona ou a imagem some. Teria como me ajudar, por favor?

@mauriciosoares6059 4 года назад

Cara por favor libera esse arquivo do código

@brenoluiz3980 3 года назад

como vc fez pro seu notepad ficar colorido?

@marcielribeiro4949 4 года назад

entao é css e nao html,obrigado pela aula

@808kgold8 4 года назад

pra minnao deu certo nem no html nem na css grande merda

@gustavoalmeida2615 8 лет назад

Otimas aulas to aprendendo pelo android

@prefeito1282 4 года назад

Não está funcionando no meu fiz tudo que explicou mais não funcionou. Alguém que usa o visual estúdio code pode me dar uma ajuda ?

@henriquereis8809 4 года назад

Valeu irmão!!! Ajudou pra caramba!

@Jtube0101Mega 6 лет назад

Com essa aula assisti todas as aulas de HTML 4! Cliquei no joinha em todas as aulas ;-)

@cfbcursos 6 лет назад

Jobson Andreson show meu brother, muito obrigado pela força

@gustavoduarte2221 3 года назад

gostaria de fazer um backgroudimage somente na tela de login é possível?

@thedevick 5 лет назад

EAE Brother ! Cara, tentei fazer aqui mas não deu certo... TESTE DE BACKGROUND Ola

@DAures 5 лет назад

dentro do url, tem que ter o nome da imagem e o formato entre aspas, ex: backgroud-image: url("fundo.jpg");

@rodrigoalmendros7765 3 года назад

Ajudou demais obrigado

@daywisonsilva4048 5 лет назад

backgorund-imge só serve para o body? como faço pra colocar dentro de uma section?

@gabs7800 3 года назад

entenda voce é perfeito

@carlacou 3 года назад

Thank you so much!

@shinGGakuma 4 года назад

fiz isso e o meu ainda continua ao diminuir o zoom a imagem se repete, olha que o tamanho da imagem é boa mas vlw pelo video.

@wellingtonumbelino3140 8 лет назад

teria como você fazer uma vídeo aula mostrando como colocar um ícone de busca na minha página html?

@sannymelo 6 лет назад

Fantástico, me ajudou bastante. Obrigada! Deus abençoe!

@cfbcursos 6 лет назад

Amém, obrigado =)

@ursoh9285 4 года назад

Salvou minha vida

@viniciussoares4767 3 года назад

Ajudou mt, valeu

@vinicius_santosrc 3 года назад

belo video!!!

@pauloteixeira5935 4 года назад

Show.

@pauloerik5129 4 года назад

mito

@cleyanjos919 5 лет назад

Mestre!

@NEROOOOZ 6 лет назад

meu texto sumui por causa da imagem e agora???

@gabrieljauneribera9931 6 лет назад

Aula rápida de 9 minutos ;-;

@adrielly9143 6 лет назад

A Minha imagem não está aparecendo no index?

@thelopes992 5 лет назад

no celular a imagem duplica, como eu corto isso ?

@patrickalmeidalima 7 лет назад

caralho me ajudou muito esse video serio mesmo tava procurando igual um doido e achei aqui mais um sub

@jozenildopereira9645 6 лет назад

olá bruno parabéns pelo canal gostaria que vc fizesce um video mostrano o código como inseri compra de pela net

@cfbcursos 6 лет назад

Muito obrigado, para este procedimento vc irá precisar um pouco mais que HTML, você também precisará aprender sobre PHP e MySQL, aqui no canal temos estes cursos

@georgelobo4048 3 года назад

Valeu professor, muito obrigado

@malutestao8880 4 года назад

Tu salvou minha pele irmão! tmj!

@kynsllerlandim 6 лет назад

Amemm consegui muito obrigado cara

@cfbcursos 6 лет назад

UHUUUU, por nada, precisando, estamos aí

@kleitoaraujo9831 7 лет назад

Parabéns, estava procurando exatamente isso, muito obg.

@cfbcursos 7 лет назад

Valeu...

@kalinelima182 5 лет назад

2:27 ele diz que é muito simples e não tem mistério. O video dura 9:14 minutos... 4:50 ele explica finalmente o que tá no título 7:29 ele explicou tudo o que tinha de explicar

@humanoreal 5 лет назад

O video e grande mais muito explicativo tenha calma... sem pressa ou ira vira um Copiador de codigo (=

@mateusbusiness 5 лет назад

vdd, tem q ser mas direto e rápido:)

@MDGRecords 5 лет назад

@@mateusbusiness jhow ele esta tentando explicar ao maximo,,assim vc n irar criar um codigo e sim copiar!

@marcosbambalas2295 5 лет назад

Os dois estão certos, ele em explicar e a moça em resumir, bjos...

@meganeshinryakusha 4 года назад

como deixo o tamanho adaptavel para android?

@filipenespoli1 5 лет назад

Crlh é o melhor professor desse país sem dúvidas

@caiolopes8572 8 лет назад

Amigos estou com um problema Coloquei um banner no meu site So que ele não fica na lateral E quando fica o texto do site desse e fica um espaço no meio VC pode me ajudar.valeu

@cfbcursos 8 лет назад

+caio lopes Posso tentar de ajudar, manda pro email do canal, canalfessorbruno@gmail.com

@ViniciusSantos-eh1kw 4 года назад

Muito bom video,me ajudou bastante

@cliciaweyne8047 4 года назад

Muito obrigado amigo, eu usava a função "margin-top", que não era responsive e distorcia a imagem

@soumajbldeleve815 6 лет назад

imas kkkkkkkkkkkk

@MrCleiton633 6 лет назад

Muito bem explicado, mas não funcionou aqui.

@cfbcursos 6 лет назад

Fala meu caro, manda seu codigo para perguntas@cfbcursos.com.br, vou tentar lhe ajudar de alguma forma! =)

@MrCleiton633 6 лет назад

Deve ter a ver com a maneira que comecei, pois tinha colocado a imagem em uma pasta do projeito aqui dentro do netbeans. Não sei como chegue a esse ponto, mas encontrei a solução em um vídeo tailandês (Acho) + as suas dicas . Aqui para mim faltou a linha>>>> background-image: url(imagens/Fundo.jpg); Quase desisti. Obrigado pela atenção! Segue a solução final> body{ background-image: url(imagens/Fundo.jpg); background-repeat:no-repeat; background-color:#000; background-size: 100% }

@typacheco5661 4 года назад

eu não consigo enxergar!

@ivanlennon3837 7 лет назад

professor ... coloquei tds os comandos como vc disse ate colocar a imagem vai que seria o seguinte comando ... background-image:url(fundo2.png) mas na hra de adicionar as configuraçoes de ajuste de imagem ... a imagem ja nao aparece e se adicionar o comando background-color:#000; o fundo da pag fica preta mas sem imagem ... Meio ambiente body{ background-image:url(fundo2.png) background-attachment:fixed; background-size:100%; background-repeat:no-repeat; background-color:#000; } esse ai é o que fiz se puder dar uma olhada ... sou aluno da etec do 1 semestre e estou vendo html na aula De TPI (TEC. de programaçao de internet) vlwwww! abrçs

@cfbcursos 7 лет назад

Ivan Lennon compacta os arquivos e envia outro email do canal pra eu dar uma olhada

@dukyu 6 лет назад

O meu está dando o mesmo problema

@maiconmelo6938 6 лет назад

O meu deu o msm problema, so esta aparecendo o fundo preto

@gustavofagundes2253 7 лет назад

Opa tudo bom, coloco todos o comando e está tudo certinho tudo compactado pode me ajudar oque tem de errado ? ela repete se eu mudo o tamanho e nao se ajusta com deveria ? será possivel se a própria imagem deve ser de tamanho de diferente ?

@cfbcursos 7 лет назад

Posta aqui os comandos pra eu ver se estão corretos

@Nilton_Rocha 8 лет назад

Oláá Fessor. Esse novo curso de HTML5 é focado no conceito mobile first?

@cfbcursos 8 лет назад

+luiz campos Luiz, não é focado em mobile first não, mas o conteúdo é o mesmo, mobile first é um conceito de desenvolvimento onde se pensa primeiro em dispositivos portáteis, tablets, celulares, etc, vem da forma que você estrutura seu site.

@roohdna3373 6 лет назад

O meu só fica com o fundo preto... coloquei o nome da imagem com o formato certinho

@roohdna3373 6 лет назад

Ah consegui, estava com espaço entre a url e os ()

@appsolucoes256 4 года назад

Muito bom!

@darkpro7443 7 лет назад

desde o momento que começou o video eu fiz o que o senhor fez, embora no meu não tenha funcionado. Pois bem minha pergunta e esse codigo html foi feito em linguagem html ou css porque não entendi ?

@cfbcursos 7 лет назад

A formatação foi feita em CSS

@energize2868 8 лет назад

muito ruim nao consigo ve codigo os video mutio ruim sem qualidade

@cfbcursos 8 лет назад

Vanderlei, troca seu pc ou melhora sua internet, ai vai ficar bom, todos os vídeos estão em HD filho

@PauloCesar-fd7sy 7 лет назад

bom dia parabens, muito susinto,mas vai ai uma pergunta bem chata. seria possivel fazer troca automatica do fundo de uma pagina,(a parte chata: sendo chamada por um link de outra pagina). o motivo da pergunta é:tenho uma pagina com um , quero mudar o fundo da pagina(não do ), toda vez que clikar em um link

@cfbcursos 7 лет назад

Tem sim, mas terá que ser usado javascript ou jquery e dependendo de como você quer essa mudança ainda pode ser necessário usar php.

@PauloCesar-fd7sy 7 лет назад

obrigado por ter repondito tão prontamente.

@joaopaulo4596 4 года назад

nossa, me salvou. vlwww

@joaocarvalho313 7 лет назад

qual programa você tá usando? eu programo usando o bloco de notas mas é meio chato, aguardo sua resposta, obrigado!

@cfbcursos 7 лет назад

NotePad++ ou o Sublime Text

@joaocarvalho313 7 лет назад

CFB Cursos eu percebi depois que era o notepad ++, mas obg por me responder

@konetone7020 5 лет назад

CFB é pica e, o resto é buraco!

@cfbcursos 5 лет назад

kkkkkkkkkkkkkkkkkkkkkk, rindo até 2048, valeu meu bother

@EduardoPiston 6 лет назад

As 42 aulas deu 16:43 de duração.

@cfbcursos 6 лет назад

E tem também as aulas de HTML5, CSS3, Javascript, PHP, etc...

@JuniorSilva-ee5nv 6 лет назад

eu não consigo colocar a imagem. Só aparece o nome "Inserindo plano de fundo", mas não aparece a imagem.

@rafaelcarlos3815 4 года назад

ponto é a extensão

@wfelixwaf9837 7 лет назад

Otima aula, ganhou um novo escrito, agora gostaria de saber se tem alguma aula sua aonde ajuda com recursos para ajustar o site desktop para site mobile?

@cfbcursos 7 лет назад

Valeu Wellington, muito obrigado, você está querendo conteúdo sobre layout responsivo e ou "adaptivo", esse conteúdo virá no curso de CSS, dá uma olhada nas aulas, ainda não gravei sobre este assunto, mas já tem na apostila que você pode baixar pelo site do canal cfbcursos.com.br

@wfelixwaf9837 7 лет назад

seria em formato adaptivo, vou dar uma olhada, novamente muito obrigado, parabens pelo trabalho

@edmilsonfurtado1680 6 лет назад

obg cara, me ajudou muito. parabens. mas 1 inscrito

@cfbcursos 6 лет назад

Opa, valeu meu cari, muito obrigado

@xfacemusicbr 7 лет назад

siples e objetivo! obg, ajudou de maissssssssssssssssssssss!!! obg mesmooooooooooooo vlwt é show!!!

@cfbcursos 7 лет назад

Valeuuuuuuuuuuuu brother, muito obrigado, não deixe de assistir HTML5 e CSS também que vai ser bastante importante pra você

@tadio2011 7 лет назад

Ola Fessor, muito bom a dica, mas eu ja uso esses recursos e gostaria que não ficasse o espaço preto, tem algum video seu falando sobre o redimensionamento em todos os casos? widht e height? background-size: 100% 100%, não atende, background-size: auto 100%, não funciona, deveria ser jquery? abraço

@josivan.producoeseeventos1811 6 лет назад

muito obrigada mim ajudou bastante parabéns

@cfbcursos 6 лет назад

Que ótimo, bons estudos

@marcosm.9457 7 лет назад

poxa vida, gostei! meu salvou valeeeeeu

@cfbcursos 7 лет назад

Que ótimo brother, muito show, não deixe de assistir também HTML5, CSS e os outros, aproveite também para baixar as apostilas gratuitas pelo site do canal