André Buzzo

CRIAÇÃO DE SITES | DESENVOLVIMENTO DE SISTEMAS | CONSULTORIA EM SEO | ORIENTAÇÃO EM TCC

Trabalhando com Backgrounds

Publicado na categoria Vídeo Aulas, Vídeo Aulas - Webdesign com 6.571 visualizações e 12 comentários

Trabalhando com Backgrounds

Fala Pessoas!

A pedido do Elton Santos, que estava com várias dúvidas sobre como se faz para trabalhar com backgrounds via CSS, criei essa vídeo aula que acho que está bem completa sobre o assunto!

Vamos aprender a declarar um background que se adapte a todas as resoluções de tela, assim como aprenderemos a redimensionar uma imagem para que atenda aos requisitos necessários!

Aproveito também para sanar a dúvida do Vagner, que me perguntou qual programa ele poderia usar para compactar uma imagem para que a mesma não dificulte o carregamento da página.

Espero que eu tenha atendido ao pedido dos dois, e que a vídeo aula seja de grande utilidade a todos!

Forte abraço e fiquem com Deus!

Até a próxima!

  • somber

    Como faço colocar uma imagem de resolução grande q fique fixa no meio do monitor e que o layout fique certinho ao meio? tipo o eu deixo o background numa resolução de 1900×1400.
    tipo eu coloco a imagem e deixo, mas quero que apareça so o layout no meio, e fazendo com q a unica forma de eu visualizar o background e diminuindo o zoom da tela?

    • Fala Somber!

      Compadre, vc tem algum exemplo disso que você tá falando? Porque para centralizar o background é só usar o atributo “center”, que eu cito na vídeo aula…. agora, se quer fazer outra coisa, peço a gentileza me explicar melhor!

      Abraços!

  • andré, me surgiu outra duvida quanto aos bgs.

    Como faço pra construir a imagem que pegue boa parte do monitor e que o layout fique certinho ao meio?

    tipo….eu faço a montagem e deixo uma parte em cada lado que quero que apareça, e o layout no meio, como tenho que montar isso?
    se é que fui claro.

    obrigado.

    • Deixa eu ver se eu entendi. Você quer deixar uma imagem centralizada como background e um espaço entre a imagem? é isso?

      E o layout (conteúdo) centralizado?

  • Lopes

    Uma duvida.
    Não importa a resolução da minha tela a minha imagem de backgroud vai se ajustar??
    Por exemplo o meu back esta com 1900 e minha tela tem 1024 a imagem se ajusta?
    Pergunta de iniciante mais vamos la… kkkkk

    • Fala Lopes!!

      Então meu amigo…ela fica “proporcionalmente” ajustada ok?

      Pode ser que “sumam” determinadas partes do seu background e outros sejam exibidos conforme o tamanho do monitor….

      Abraços meu velho!!!

      Até mais!

  • Elton Carvalho

    Como seria se eu quisesse um Background diferente por Pagina?
    Exemplo:
    Bolos (bg vermelho)
    – 1º opção (bg vermelho)
    – 2º opção (bg vermelho)
    – 3º opção (bg vermelho)

    Doces (bg amarelo)
    – 1º opção (bg amarelo)
    – 2º opção (bg amarelo)
    – 3º opção (bg amarelo)

    No exemplo eu uso uma “Pagina Mestra” as paginas são inseridas nela com Include, teria como em alterar o bg? Já tentei com assim em cada pagina mas não deu certo :S

    • Fala Elton!

      Na realidade, o que você precisaria mudar é o arquivo CSS e, já que você usa include, você precisaria “dinamizar” o campo que recebe a folha de estilos, e para cada “página incluída”, você chama o CSS que deseja.

      Porém, eu vejo um GRANDE problema e optar por trabalhar dessa maneira….

      O usuário pode pensar que saiu de seu site por conta dessas trocas de backgrounds! Uma das regras de um bom design é “manter a consistência do layout”, e procedendo dessa maneira, você a está matando! rs

      O que você poderia usar para diferenciar seria a troca do título, como um H1 na cor vermelha para Bolos, na cor amarela para Doces, e assim por diante.

      Dessa maneira, você cria classes para esses H1 e insere nas suas páginas, sem se preocupar com o campo dinamizado na requisição de sua folha de estilo!

      Abraços!

  • Elton Santos

    Show d+!!!!!
    Ainda nao vi, to no trabalho, mas so em ser do meu amigao andré buzzo, ja posso considerar uma video aula PERFEITA!!!! Parabens e muito obrigado meu amigo :D

    • Fala Elton!!

      Que isso compadre! Assista lá e veja se te ajuda meu velho!!

      Abraços!

  • Nathan Vieira

    Parabéns André!!! Ótima aula.

    Forte Abraço!

Saiba mais sobre

André Buzzo

Sou desenvolvedor web especializado na criação de sites gerenciáveis com Wordpress; colunista da Abraweb - Associação Brasileira de Webdesigners - e tutor na instituição MX Cursos.

Template? Eu programo o seu!

Então você comprou um template, e pensou que ia ser fácil colocar seu site no ar né?

Pode ser fácil sim! Deixa comigo que eu faço ele ficar funcional para ti!

pesquise por conteúdos

Meus cursos

eu recomendo!

instagram