Ir ao conteúdo

Posts recomendados

Postado

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:

image.thumb.png.10255aa8c26efc69d4eccaecb711c02d.png

Postado

@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

  • Curtir 2
Postado

@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 */
}

 

 

  • Curtir 1
  • Amei 1
  • 3 semanas depois...
Postado

@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!

  • Curtir 1

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!