Imagem fixa de fundo

Para colocar uma imagem fixa como fundo do blog ou site use o seguinte código:

background-attachment: fixed;
background-image: url(endereço da imagem);

Isso funcionar tanto para a pagina inteira como para algum setor especifico como por exemplo main, sidebar ou qualquer outra parte dependendo de como é escrito o CSS do seu site. Usei como exemplo as partes mais comuns do blogspot.

Evidentemente isso só terá utilidade no caso de usar uma imagem de fundo. No lugar onde está escrito endereço da imagem coloque a url da imagem(lugar onde você hospedou a imagem), pode usar para hospedar esse site http://imageshack.us. A url correta é aquela que termina com .gif ou .jpg dependendo como você salvou a imagem no seu computador, geralmente encontramos essa url no campo Direct link to image.

Essas alterações no código das imagens de fundo são feitas pela página editar html no Blogspot, para chegar nessa página clique em layout depois na guia editar html, então é só achar a parte do código que você deseja mudar para ficar mais fácil encontrar o que deseja clique ctrl F(isso abre uma janela para você escrever o que procura).

36 comentários :

  1. Me ajude! Olha kra, to muito perdido, eu meio que aprendi a mexer no photobucket mas, eu não sei como criar um button ou banner, não sei c é facil isso, mas eu não to conseguindo. Poderia me ajudar?

    ResponderExcluir
  2. criar um banner ou button precisa de um programa para editar imagens, mas tem uns sites que fazem isso online

    http://cooltext.com/TextureBrowse.aspx
    http://www.buttongenerator.com/

    ResponderExcluir
  3. VLW ae!! Mas poderia dizer tbm algum programa de editor de imagem?

    ResponderExcluir
  4. OLÁ FABIANO..

    COMO EU POSSO COLOCAR UMA 3ª COLUNA NO MEU BLOG??? SEGUI AS SUAS DICAS E CONSEGUI, MAS AS COLUNAS FICAM LADO A LADO....

    QUERO QUE FIQUE UMA PARA A ESQUERDA E OUTRA PARA A DIREITA....

    DESDE JÁ, OBRIGADO..

    ResponderExcluir
  5. olá, ja consegui muda ro meu background com a sua ajuda mas nao consigo mudar a imagem do header , tem alguma dica para mim, estive a ver os seus post mas acho que nao vi sobre o header.

    Obrigado por partilhar as suas dicas,estou a tentar personalizar o meu blog e tem dado jeito.

    Diana

    ResponderExcluir
  6. Diana, para colocar no header ou qualquer outra parte é do mesmo jeito que no fundo da pagina toda.
    encontre o .header{.............} e coloque o mesmo código que usou para o fundo da pagina.

    ResponderExcluir
  7. o Post ta show so não fico bem claro onde vão esses códigos. Eu sei que é um editar html mas onde eles vão.

    Obrigado!

    ResponderExcluir
  8. aquele codigo de imagem fixa no fundo o
    background-attachment:fixed;

    tem q ficar em baixo do:

    background-image: url(URL DA IMAGEM);}

    e ficar assim:

    background-image: url(URL DA IMAGEM);
    background-attachment: fixed;}
    background:$bgcolor;

    ResponderExcluir
  9. Anônimo

    não tem essa chave depois do fixed, tente colocar assim:

    background-image: url(http://img61.imageshack.us/img61/8285/bannerdicasdj6.jpg);
    background-attachment: fixed;
    background:$bgcolor;


    vai aparecer o banner desse blog como imagem de fundo fixa. mas tem que ser junto com o body{.....}

    ResponderExcluir
  10. quero parceria se aceitar aparece no blog e deixa uma mensagen do cbox ai eu coloco um de seus banners no blog

    ResponderExcluir
  11. cara eu n sei pq mas quando eu coloko uma img assim:

    body {background-image: url(A URL DA IMAGEMG.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;}

    ai o fundo fika branco!!!e outros textos mudam de cor!
    entao u uso o baackground-color coloko a cor do fundo certa,mas ai os textos da minha postagem fika apagado(invisivel)!

    o q eu faço??

    ResponderExcluir
  12. primeiro onde você escreveu A URL DA IMAGEMG.gif está colocando o endereço de uma imagem certo? mas os sites de hospedagem fornecem varias urls, tem que ser o link direto para imagem e não de uma pagina com a imagem.

    sobre a cor das letras não tem nada a ver com isso, cor da letra você define colocando color: #...... e a cor.

    realmente se colocar background-color:#..... vai aparecer a cor por baixo da imagem.

    ResponderExcluir
  13. eu coloquei a URL certa sim eu uso o direct link,eu peguei a img la do photobucket^^

    e os textos fikam transparentes msm eu mudando novamente a cor no "Fontes e cores"!

    ResponderExcluir
  14. voce deve ter apagado alguma coisa por engano.

    a parte que controla a cor da letra é color:#ffffff; nesse caso seria cor branca.

    ResponderExcluir
  15. Po r gentileza, se alguem puder me ajudar postei as imagens no meu blog mas elas mudaram de cor !!

    ResponderExcluir
  16. Eduardo


    qual código usou? é muito estranho o que você diz, as imagens não mudam de cor.

    se quiser escreva para nosso email

    ResponderExcluir
  17. Mais uma vez um post útil para nossos blogs!!! xD

    eu gostei muito deste post...
    mais qria saber como eu posso fazer para por igual do seu blog os links para adss:
    favoritos ,feed ,comunidade do orkut ,atualizaçoes por e-mail...
    (para ir ao topo eu jah tenho em meu blog...)...
    (fixos no canto da pag.)

    Além do "Voltar ao topo"...os outros eu ñ achei nm um post sobe isto(desculpe se tiver)...
    como eu faria?

    vlw!grato xD

    ResponderExcluir
  18. Oi,primeira vez aqui,achei muita coisa interassente,tudo bem explicado.Não tenho muita experiência com blog ainda.Queria saber se esse codigo também serve pra colocar uma imagem fixa no fundo da caixinha da barra com rolagem.

    ResponderExcluir
  19. micarla
    sim, deve funcionar em caixas com barra de rolagem também

    ResponderExcluir
  20. CONSEGUI COLOCAR A IMAGEM NO BLOG, FICOU BOA, SÓ QUE ESTA MUITO GRANDE, ALGUÉM SABE COMO DIMINUIR E DEIXAR DO TAMANHO DA PAGINA DA WEB POR EXEMPLO ? VALEU !!!

    ResponderExcluir
  21. ME AJUDE, Por Favor.
    Eu consegui colocar uma imagem de fundo no meu blog, mas a imagem ficou também onde está escrito e atrapalha de ler. Tem como colocar tipo um fundo de uma cor só só onde ta escrito? Aguardo resposta o mais rápido possivel, obrigada :]

    ResponderExcluir
  22. na parte #outer-wrapper {... coloque uma cor de fundo, pode ser branco
    background-color: #FFFFFF;

    ResponderExcluir
  23. ola fabiano mais uma vez.
    Agradeco desde a exelente ajuda que tenho tido aqui neste site em honra do meu blog (www.tvhdedownloadsgratis.com)
    Tenho uma duvida que talvez va virar novo post aqui que e a seguite...
    eu quero criar um cabecalho genero blogs de downloads fixo ocupa o ecra todo dentro do seu tamanho,em cima com uma imgem ou banner criado por mim, sem alterar a imagem de fundo.
    como e possivel fazer isso.sei que pode ser do template ja vem com esse formato.mas ai mudar de template e complicado agora...
    podes ajudar s.f.f se esxite alguma maneira!algum codigo milagroso.
    agradeco desde
    abraco

    ResponderExcluir
  24. dwerso
    se entrar na pagina designer, clicar para editar o cabeçalho do blog você poderá enviar uma imagem para usar no lugar do titulo do seu blog

    ResponderExcluir
  25. Olá Fabiano!

    eu gostaria muito de fixar apenas parte do meu template. Gostaria que o cabeçalho fosse fixo, lugar onde tem o menu, e que todo o resto ficasse em escroll normal. Você, saberia me orientar me dando alguma dica a esse respeito?
    obrigado e sucesso ao seu blog :D

    ResponderExcluir
  26. Santiago Régis
    acho que não tem como fixar uma parte da pagina, mas a questão também seria que se fixar um parte da pagina o restante que sobraria para realmente ver o seu blog seria pouco.

    ResponderExcluir
  27. como faço para colocar duas imagens de fundo uma após a outra.

    ResponderExcluir
  28. Muito Bom obrigado eu estavas hoje a procura disso para colocar no meu site de muonline e ficou show de bola a minha equipe aprovou e muito boa a sua iniciativa de postar aqui para nós continue assim e parabens

    ResponderExcluir
  29. eu achei muito legal esses codigos

    ResponderExcluir
  30. não consegui colocar em que lugar na página de HTML tem que colocar o código

    ResponderExcluir
  31. esse código é para usar no body{.... }

    ResponderExcluir
  32. Olá!
    Alterei o template do meu blog e, diante de tantos erros para conseguir colocar o modelo que queria, acabei escolhendo um modelo simples do próprio blogger. Ocorre que eu queria muito que o desenho ficasse em toda a página e não apenas no título. Vc pode me ajudar?
    Obrigada desde já!

    ResponderExcluir
  33. para deixar a imagem repetir é só usar esse código

    background-image: url(endereço da imagem);

    sem mais nada

    ResponderExcluir
  34. Olá, adorei o suas dicas, será que pode me ajudar, uma pessoa editou o meu blog, a primeira vez q fiz, encontrei um novo modelo que qro colocar, mas de nenhuma maneira consigo editar a imagem fixa do fundo, eu simplesmente não a encontro, poderia me ajudar?Obrigada desde já.

    ResponderExcluir
  35. Joicinha para fixar uma imagem de fundo é com o código que mostramos aqui ou então direto pela pagina design do modelo, veja o link abaixo:
    Trocar imagem de fundo no blog - Designer do modelo

    mas seja qual for a opção que usar para editar seu blog faça um backup antes de mexer no template assim se tiver algum problema poderá voltar ao seu modelo atual facilmente

    ResponderExcluir