Trabalhando com Backgrounds | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Trabalhando com Backgrounds

Publicado na categoria Vídeo Aulas, Vídeo Aulas - Webdesign com 6.981 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!

Voltar à página anterior!

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