HTML Como coloco imagens no fundo do meu site ?

[VictorLpes]

Boa Noite, estou começando agora com a programação e terminei um curso. Porém eu queria ir mais além, alguém poderia me ajudar ?

 

Eu andei vendo um monte de sites modernos com imagens de fundos encantadores rs. E eu queria aprender a colocar em meu site e indicações de onde conseguir essas imagens!

 

e como colocar elas em meu site

 

Exemplos:

[Pedro Math.pi]

Boa noite. Estou bem enferrujado no assunto. Mas acho que o que você procura é um site responsivo com bootstrap. 

https://bootstraptaste.com/

 

Um efeito legal também é o Parallax, onde o fundo de move mais lento do que a rolagem. Ex: https://www.mildd.com/

[GabrielSennaMs]

@VictorLpes Bom amigo eu tenho esse exemplo de como coloca imagem, e video de background: https://codepen.io/morto/pen/EBOrzj.

 

Pela image você conhece a comunidade He4rt, nessa comunidade existe uma iniciativa de estudo chamado 4noobs ela é feita para devs iniciantes, você pode acessar ele nesse link https://github.com/he4rt/4noobs.

 

 

Um material deles falando sobre sua duvida: https://github.com/mathh95/css4noobs/blob/master/Modulo-Basico/background.md

[Adriano_web]

@VictorLpes Boa noite, tudo bem? 

 

As imagens que eu costumo utilizar são sempre de algum site que disponibiliza elas sem direitos autorais como é o caso do Pixabay, eu quase sempre utilizo as imagens de lá. 

 

Para inserir a imagem eu seu site com HTML e CSS é muito simples, basta utilizar as propriedades de fundo(background) e inserir o que deseja e para deixar responsiva você poderia utilizar a propriedade max-width com o valor de 100%. Confira o exemplo que fiz.

 

seletor {
   background-image: url(endereço da imagem);  /* Localiza o endereço URL da imagem */
   background-position: cover;  /* A posição da imagem irá se ajustar para 
deixa-lá com tamanho real */
   background-size: 100% 100%;  /* A altura e a largura da imagem terão 100% de tamanho */
   background-repeat: no-repeat;  /* Diz que a imagem não será repetida */
   max-width: 100%;  /* Largura 100% imagem responsiva */
}

/* Ou você pode usar a propriedade abreviada "background" 
 * para agrupar todos os valores em um só como é visto abaixo */

seletor {
   background: url(endereço da imagem) cover 100% 100% no-repeat;
   max-width: 100%;  /* Largura 100% imagem responsiva */
}

 

 

[VictorLpes]

@Adriano_web Desculpa pela demora, agradeço de mais pela indicação, será de grande utilidade.

 

Grato!

Em 01/11/2020 às 21:21, Adriano_web disse:

@VictorLpes Boa noite, tudo bem? 

 

As imagens que eu costumo utilizar são sempre de algum site que disponibiliza elas sem direitos autorais como é o caso do Pixabay, eu quase sempre utilizo as imagens de lá. 

 

Para inserir a imagem eu seu site com HTML e CSS é muito simples, basta utilizar as propriedades de fundo(background) e inserir o que deseja e para deixar responsiva você poderia utilizar a propriedade max-width com o valor de 100%. Confira o exemplo que fiz.

 

seletor {
   background-image: url(endereço da imagem);  /* Localiza o endereço URL da imagem */
   background-position: cover;  /* A posição da imagem irá se ajustar para 
deixa-lá com tamanho real */
   background-size: 100% 100%;  /* A altura e a largura da imagem terão 100% de tamanho */
   background-repeat: no-repeat;  /* Diz que a imagem não será repetida */
   max-width: 100%;  /* Largura 100% imagem responsiva */
}

/* Ou você pode usar a propriedade abreviada "background" 
 * para agrupar todos os valores em um só como é visto abaixo */

seletor {
   background: url(endereço da imagem) cover 100% 100% no-repeat;
   max-width: 100%;  /* Largura 100% imagem responsiva */
}

 

 

Obrigado, Grato!