Hostnet, patrocinador Master desde 2004

MX Masters - Vídeo Aulas, Artigos, Tutoriais, Cursos gratuitos e muito mais » Desenvolvimento » Tableless » Fazendo o background se ajustar a qualquer resolução com CSS

Fazendo o background se ajustar a qualquer resolução com CSS

Salve amigos do MxMasters, sou David CHC, e nessa vídeo aula irei mostrar como fazer um background se adaptar a qualquer tipo de resolução. Não é muito recomendado utilizar essa técnica, já que a imagem sofrerá distorções de acordo com a resolução do usuário. Fica o alerta, e utilize com moderação por conta e risco, rs. Boa aula.

David CHC

Líder do time técnico do Grupo MX Cursos. Trabalha na área de Frontend e Backend. Tendo conhecimentos em Padrões Web( xhtml, html5, css), javascript( framework jQuery), PHP, Python, Ruby, MySQL.

Adicionar aos amigos

Últimos posts deste autor

Comentários

111 Comentários para Fazendo o background se ajustar a qualquer resolução com CSS

  1. Robson disse:

    Só uma dica, vi algumas perguntas sobre o pq o centeudo do site sumiu, onde tem z-index:0 mude para -1

  2. Syrlenne disse:

    Eu estou tentando trocar o background do meu site da cor branca por uma imagem de fundo. O plano de fundo dele é branco, mas não encontro em nenhum lugar onde trocar. Como o meu template tem divesos estilos, estou trabalhando com o estilo5, mas não encontro nada das linhas que as pessoas explicam.

    Alguém pode me ajudar?

    Agradeço e aguardo.

  3. Célio disse:

    po cara me salvou pacaramba ja tava a uns 3 dias pra fazer esse negocio ai, pois bem sou iniciate nessa vida de criação de sites, pois bem eu fiz tudinho que vc falou, mesmo sem saber pra que a maioria serve, e deu certo, mais o corpo do site nao esta mais aparecendo, so fica a imagem e mais nada. sei que tu é fera quebra essa ai pra min, como e que resolvo isso ??

    desde ja agradeço..

  4. Jefferson disse:

    Muito obrigado pela vídeo aula, ajudou bastante!

  5. Marcio disse:

    Muito bom, obrigado me ajudou muito!

  6. Bruno disse:

    http://www.gambarukandojo.com/
    queria uma ajuda nesse site, preciso que ele se auto ajuste em outras resoluçoes.

    nao sei se vcs entendem de joomla tbm, queria saber como fazer que as contas dos usuarios expirem em um certo tempo, alguem poderia me ajudar?

  7. celiorp disse:

    Muito bom,
    Consegui fazer utilizando jsf 2.0 com templates, funcionou direitinho. ^^

  8. David CHC disse:

    Em vez de colocar opacity, coloque um png transparent, vai dá menos problema.

  9. Junior disse:

    Cara tudo q coloco dentro da div principal ta pegando opacity como resolver esse problema .. tudo mesmo q ta dentro da PRINCIPAL pega opacidade logo tudo mais me ajuda plzzzzzzzzzz

  10. Jonas Cardoso87 disse:

    o cara o meu não ta alinhando ao centro!!!

  11. Menkay disse:

    O amigo, muito obrigado, ajudo muito eu tava precisando aprende como se fazia isso, faz tempo que procuro um meio de fazer isso numa imagem do meu site, mais não acertava vlw mesmo.
    para bens vc explica muito perfeito.

  12. David CHC disse:

    No caso como a imagem vai se expandir , vc pode tentar colocar valores relativo, tanto para dimensões do botões, quando a posição, uma simulação:

    .botao{
    width:10%;
    height:10%;
    position:absolute;
    top:30%;
    left:20%;
    }

    No caso vc vai fazer na tentativa mesmo, até encontrar a posição correta.

    • Liderarnegociacoes disse:

      Bom dia David!
      Obrigado pelo retorno! Creio que não expliquei corretamente. Imagina que no background que você colocou como fundo na sua vídeo aula existisse um desenho, uma imagem ou um botão, existe como eu criar um link nesta imagem ou botão ? Já tentei de varias formas mas não consegui, o link é criado mas o ponto ativo muda de lugar conforme o tamanho da tela e não fica em cima do botão.
      Grande abraço
      Vanderlei

  13. Stize disse:

    Davi como faço para deixar uma imagem fixa e sempre redimensionavel em relação ao tamanho da tela de um notbook ,sendo que esta esta depois de um texto e background fixo tambem.
    grato,

    Carlos Junior

  14. David CHC disse:

    Hermes, eu não conheço a arquitetura do joomla, mas sa utilização é a mesma. é criar uma div para simular o body, e outra dentro dela para centralizar;
    Mas dependendo não vale a pena fazer como fiz, e sim trabalhar com background large, q vc utilizar imagens bem grandes, de 2500 por 1800, ou algo parecido

  15. Leonardo disse:

    cara muito bom seu tutorial, o melhor que ja vi cara….explica ali aonde e como usar..nao é que nem uns q só coloca o codigo mas nao diz a onde nem mostra..ou faz um video de 10min

  16. Crocodilomaster disse:

    Muito bom esse tutorial cara ajudo muito valeu

  17. David CHC disse:

    O primeiro passo é seguir os padrões web na hora desenvolver o seu site, e levar em consideração a semantica na hora de estruturar o html. Depois se preocupar com o conteudo do seu site. Vc pode divulgar em redes sociais, com twitter, facebook, orkut, etc. Recomendo vc pesquisar sobre SEO

Deixe uma resposta

Você precisa fazer o login para publicar um comentário. Caso não tenha uma conta, cadastre-se

Últimas do site

Grupo MX Internet LTDA - Todos os direitos reservados