COMO CRIAR BACKGROUND RESPONSIVO COM CSS [Atualizado]

[@icarogoes1275]

Massa!
No meu caso, estou usando uma imagem que a parte de cima é a mais importante para mim. Usei a resolução mencionada no vídeo mas no background-position usei o valor top. Ficou ótimo obrigado pela dica!

[@temposesquisitos]

É isso aí, o posicionamento pode ser alterado de acordo com a necessidade de cada um. Que bom que ajudou.

[@jailson7344]

faz tempo que não consigo inserir background image por conta do caminho feito até a pasta na imagem, só agora depois de 1 semana é que consegui com esse vídeo. Valeu mesmo brother! :)

[@temposesquisitos]

Maravilha. Que bom que ajudou!

[@na_panfletos_e_cartoes]

Outra forma que achei bakana professor foi colocar a largura minima e a máxima da tela na css e depois criar uma class para a imagem na css e colocar largura min de 10% e Max de 100% isso resolveu o problema de qualquer uma das imagens sendo de fundo ou conteúdo. Parabéns seus. Vídeos são tops vim aqui para saber como se coloca cor de fundo numa imagem acabei vendo esse como sugestão tive que ver, mais um aprendizado na forma de por um fundo com responsividade 😊

[@temposesquisitos]

Bacana. É muito bom quando o pessoal consegue encontrar outras soluções. Parabéns!

[@na_panfletos_e_cartoes]

@@temposesquisitos gostar de TI é gostar de resolver roblemas

[@Nandarabe]

meu deus, eu estava desesperada que não conseguia fazer o fundo responsivo
teu comentário, me salvou muito obrigado

[@hittomexicano7885]

Obrigado prof., ajudou muito com essa explicação dos "../"

[@temposesquisitos]

Que ótimo! Muita gente tem dificuldades com essa parte e fazendo assim, não dá erro.

[@mauriciom8539]

vale sim o like, explicou muito bem as propriedades de background, meio confuso pra mim ainda

[@temposesquisitos]

Pode crer. No início sempre surgem dificuldades mas com o tempo vai fixando.

[@terrornaweb9739]

caramba que qualidade! ganhou mais um inscrito.

[@temposesquisitos]

Obrigado pelo comentário. Que bom que gostou.

[@crysthinar.giampaoli1219]

Seus vídeos são top! Parabéns! Obrigada

[@temposesquisitos]

Eu que agradeço. Que bom que está gostando!

[@hawks2271]

Ajudou muito, eu estava com dificuldade de deixar minha página se adaptando automaticamente quando diminuio o tamanho da tela

[@temposesquisitos]

Que bom que ajudou.

[@ericcoutinho3985]

Parabéns pelo conteúdo!

[@temposesquisitos]

Muito obrigado

[@lucasjan7097]

Sensacional, didático e interessante! +1 Inscrito :)

[@temposesquisitos]

Muito obrigado 😁

[@juarisantos1767]

Incrível .... professor.

[@temposesquisitos]

Obrigado. Que bom que gostou.

[@carlosvictor3b-inf899]

Vídeo incrível! parabéns!

[@temposesquisitos]

Obrigado. Quê bom que gostou.

[@jondoe584]

foi util, agradeço

[@temposesquisitos]

Legal. Que bom que ajudou

[@victorlandi]

Puta que Pariolll, Vossa Exelência é foda.

[@temposesquisitos]

Hehehe, Nem tanto! Nem tanto! Mas que bom que gostou...

[@no-name2599]

muito obrigado meu mano

[@temposesquisitos]

Eu que agradeço. Que bom que gostou.

[@ninha601]

boa tarde o meu a imagem não acompanha o tamanho da tela.

[@temposesquisitos]

Que estranho. Reveja as unidades de medidas utilizadas. Ou limpe o cache do navegador para ver se atualiza.

[@ricardoecv1899]

Sensacional!!!!

[@temposesquisitos]

Obrigado, que bom que gostou.

[@santiagosantos7013]

A imagem tem que ser muito grande de largura e altura? Pois quando eu tiro zoom ela fica cortada parecendo o branco, e quando maximinizo ela fica estranha , da uma força obg

[@temposesquisitos]

Você pode resolver isso usando imagens diferentes para diferentes telas e orientações. Ou planejar a imagem para que arte fique boa mesmo com partes escondidas.

[@sergiojunior972]

Não entendi como colocando a imagem de background no Body ela não cobre no seu vídeo o Header nem o Footer...

[@temposesquisitos]

Opa. É que o body é a base, todos demais elementos vao eztar sobre ele.

[@KaiooEduardoo]

Parabéns pelo vídeo!
Tenho uma dúvida, em um site de página única, caso eu quisesse colocar uma imagem como "painel" abaixo de um header fixo com nav, essa imagem pra ficar responsiva como precisaria fazer? Eu tentei com media query utilizando 2 imagens modo horizontal e vertical, mas quando diminui o display não fica responsiva 100%...

[@KaiooEduardoo]

Consegui fazer aqui, da seguinte forma:
HTML
Título do painel
CSS
@charset "UTF-8";
.painel {
background-image: url(/img/css2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
.painel h1 {
width: 100%;
}
@media (max-device-width: 480px) {
.painel {
background-image: url(/img/css2vert.jpg);
height: 100%;
width: 100%;
}
}

[@temposesquisitos]

Bacana sua solução! CSS é uma loucura, sempre tem uma forma de resolver. Parabéns.

[@wallace4337]

obrigado amigo

[@temposesquisitos]

Eu que agradeço. Que bom que ajudou.

[@tallesmayk5165]

Muito bom!!!!!!!!!!!!!!!!!!!!!

[@temposesquisitos]

Obrigado, Que bom que gostou.

[@rafaelvaliati1978]

brabo

[@temposesquisitos]

👍👍👍

[@ninha601]

ela vai ocultando a parte mas sem redimencionar

[@temposesquisitos]

Normalmente a imagem se adequa ou a largura ou a altura da página.

[@ninha601]

Obrigadom

[@elizeuramos1]

muito bom

[@temposesquisitos]

Obrigado. Fico feliz que tenha gostado.

[@happyspirit_]

A Bitly bloqueou o seu link :/

[@temposesquisitos]

Obrigado por avisar. Vou trocar lá.

[@monstrodosvetores]

Obrigado pelo conteúdo, m as tem como fazer com imagem sem ser imagem de fundo? e qual seria o código fonte????

[@temposesquisitos]

Teria que calcular, qual distância é maior, largura ou altura. Para isso o melhor seria via javascript.

[@pedrocunha1062]

do nada um palet de cerveja

[@temposesquisitos]

Hehehe. É só pra ilustrar o Download, mesmo.

[@guilhermecarvalho4548]

vsf sinceramente

[@temposesquisitos]

???