11/11/2007

Imagem no fundo do blog

Colocar imagens como plano de fundo nos sites é uma coisa simples de fazer, basta colocar o código background-image: url(Url da Imagem); onde você deseja colocar a imagem de fundo, lembre-se qualquer parte do CSS pode ter sua imagem de fundo e não somente a tag body onde é geralmente usada. Todas essas alterações de imagens de fundo são feitas através da página editar HTML.

Veja também:
Trocar imagem de fundo no blog - Designer do modelo
Colocar fundo semi transparente no blog
Texturas e Imagem para fundo do blog

Mas além de colocar a imagem ainda podemos escolher onde ela aparecerá e se irá ou não se repetir. Então vamos por partes, primeiro sobre a imagem se repetir, aqui temos algumas opções, embaixo da linha background-image: url(Url da Imagem); colocamos:

background-repeat: no-repeat; - imagem aparece somente uma vez
background-repeat: repeat-x; - imagem repete horizontalmente(lado a lado)
background-repeat: repeat-y; - imagem repete verticalmente(uma embaixo da outra)

Um detalhe é que o ponto e virgula faz parte do código portanto não esqueça dele.
Além de repetir ou não podemos escolher a posição que a imagem de fundo irá aparecer, com o seguinte código:
background-position: right top;

Isto somente fará diferença no blog caso você coloque uma das linhas que controla a repetição, afinal se a imagem se repetir pela pagina toda ela não usará posicionamento. Para colocar a imagem no lugar que você deseja basta trocar as palavras right e top, assim você mudará o lugar que a imagem de fundo irá aparecer para fazer isto no lugar de right(direita), você pode usar center(imagem centralizada horizontalmente) ou left(imagem à esquerda). E no lugar de top(imagem no alto da tela), pode usar center(imagem centralizada verticalmente) ou bottom(imagem embaixo da tela).

Esses códigos para controlar a repetição e onde a imagem de fundo aparecerá são muito bons para usar quando deixamos a imagem de fundo fixa, acrescentando essa linha:
background-attachment: fixed;

Isto faz que a imagem de fundo fique parada na tela e o conteúdo do site deslize sobre ela. Todos esses códigos mencionados nesta publicação são usados para controlar a imagem no fundo da pagina e portanto devem ser usados juntos, deste jeito:
body {background-image: url(Url da Imagem);
background-position: left center;
background-repeat: repeat-x;
background-attachment: fixed}

Mais dicas úteis para seu blog:
Imagens de Fundo e Texturas (Background) para Usar no Blog
Hospedar Imagens no Blogger
Código html das cores para usar nos estilos CSS
Como formatar o texto do blog

Clique aqui e veja um exemplo de site com imagem de fundo fixa
Related Posts with Thumbnails

261 comentários:

  1. MUITO BOM, ME AJUDOU BASTANTE.

    ResponderExcluir
  2. como coloco uma imagem em cada canto
    nao consigo ja tentei d etudo mais sempre fica ou no canto esquerdo ou direito

    ResponderExcluir
  3. tem como eu mudar o tamanho da imagem

    ResponderExcluir
  4. você deve ajustar o tamanho da imagem antes de hospedar em algum lugar pois não é possível fazer isso com o código do fundo de página

    é possível mudar o tamanho da imagem mas num programa de edição de imagens(Photoshop, Fireworks, Paint, etc..)

    ResponderExcluir
  5. olá, estava vendo o suas dicas e elas são maravilhosas!!!! Gostaria de saber sobre a imagenm de fundo, quero deixá-la fixa no meu blog bem no centro, tenho o local para ospedar e ele mesmo me fornece a opção para redimensionar e editar a figura, seja ela jpg, gif...etc, mas o q não sei é onde vou colocar estes códigos, o meu blog é do blogspot.obrigada e bjin

    ResponderExcluir
  6. Também não entendi muito nao... não sei onde colocar o código... peo ajuda!

    ResponderExcluir
  7. Shirley Jaires

    o código para alterar a imagem de fundo deve ser colocado pela pagina editar html, na tag body

    ResponderExcluir
  8. Puxa,muito obrigada pela dica!!Você nem tem idéia de quanto procurei até chegar ao seu blog. Tô querendomudar olayout,mas tem que ser aos puquinhos pq decifrar essas linguagens em html é muito complicado.
    bjs

    ResponderExcluir
  9. Boa noite!
    Eu queria saber pq nao consigo colocar emoticons no meu blog.
    Ja tentei fazer como ensinam por aí mas nao consegui!
    Obrigado.

    ResponderExcluir
  10. Adorei aqui deu certinho tudo que você citou na postagem!

    ResponderExcluir
  11. Boas! não consigo mter a imagem de fundo! =(

    ResponderExcluir
  12. olá não consigo eu fço como esta escrito no tag body{, mas não aparece nada coloco visualiza e fica tudo branco.

    ResponderExcluir
  13. Entendi tudo... porém aparece sempre o erro: "Mais de um item encontrado com o id: Text1. Os IDs de itens devem ser únicos e exclusivos".

    E não consigo prosseguir, se puder me mandar um tutorial me ajudaria D+.

    ME AJUDE POR FAVOR :'(

    ResponderExcluir
  14. anônimo

    pelo que entendi você copiou algum elemento de página duas vezes, isso pela pagina editar html. essa pagina http://cidadeweb.110mb.com/template/download.html

    fala sobre esses elementos duplicados.

    ResponderExcluir
  15. o Código é enorme onde posso incluir esse código para colocar uma imagem inteira em toda a página?
    Valeu!!

    ResponderExcluir
  16. o Código é enorme onde posso incluir esse código para colocar uma imagem inteira em toda a página?
    Valeu!!

    ResponderExcluir
  17. URBI Moda Feminina

    esse código você colocar pela pagina editar html.

    sobre imagem que cobre a pagina toda, isso é complicado pois cada pessoa tem uma tela diferente, então o que ficará bom na sua tala, talvez fique sobrando ou faltando na minha. atualmente a maioria das pessoas usa resolução de tela 1020x768, então acho que deve fazer uma imagem para esse tipo de tela.

    ResponderExcluir
  18. Pois é, Fabiano

    Mas em que parte e que código coloco para incluir esta imagem de fundo em toda a página?

    Obrigadaa

    ResponderExcluir
  19. Tentei mas não consegui.O meu é o blogspot.Lá no "body {"
    segue com "background:$bgcolor;
    margin:0;
    color:$textcolor;
    font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }"
    não consegui colocar a url sem que ficasse branco caso substitua o "background:$bgcolor;" e se deixa-lo nada muda.A url que testei é "[url=http://img239.imageshack.us/my.php?image=nv6bk3.jpg][img=http://img239.imageshack.us/img239/8158/nv6bk3.th.jpg][/url]"Nem a pau acho onde estou errando.Tem como printar passo a passo?
    Desde já agradeço.

    ResponderExcluir
  20. sergiodu.rep

    você tentou colocar a url errada.

    coloque isso dentro do body:

    background-image: url(http://img239.imageshack.us/img239/8158/nv6bk3.jpg);

    ResponderExcluir
  21. Até consegui colocar a imagem de fundo mas ela fica na direita e não consigo de repeti-la horizontalmente.
    Por favor me dê uma dica!
    Olha como ficou:

    #outer-wrapper {
    margin: 0 auto;
    border: 0;
    width: 692px;
    text-align: $startSide;
    background: $mainBgColor url(http://img25.imageshack.us/img25/3854/b2aqe3.jpg) top $endSide repeat-y;
    font: $bodyFont;
    }

    ResponderExcluir
  22. Paty

    onde está repeat-y; coloque x no lugar do y, fica assim: repeat-x;

    isso faz repetir horizontalmente.

    ResponderExcluir
  23. como eu faço o fundo ficar transparente no internet explorar? eu fiz no firefox deu sertim dae fui vizualizar no internet ficou orrivel

    ResponderExcluir
  24. Jean

    envie o código que usou para nosso email e tentaremos acertar para os dois navegadores, porém existem muitos código que só funcionam em um deles

    ResponderExcluir
  25. Tentei, tentei, tentei mas deu em nada. O codigo ficou o seguinte:

    body {background-image: url(Url da Imagem);http://i249.photobucket.com/albums/gg230/willoliveira/uoooou.jpg;
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-attachment: fixed}

    O que fiz de errado?

    ResponderExcluir
  26. Bruno Claro

    você errou na primeira linha:body {background-image: url(Url da Imagem);http://i249.photobucket.com/albums/gg230/willoliveira/uoooou.jpg;

    o correto é:
    body {background-image: url(http://i249.photobucket.com/albums/gg230/willoliveira/uoooou.jpg);

    ResponderExcluir
  27. Muito bom cara, Obrigado pela ajuda!

    ResponderExcluir
  28. Oi Fabiano... Tuas dicas foram ótimas, mas não to conseguindo expandir a imagem pra ficar na tela toda, só fica na direita ou esquerda da tela, ou no meio rs... mas não fica na tela toda.
    O que tenho que fazer? Editar minha imagem?(e qual seria o tamanho ideal) ou tem uma maneira de expandi-la?
    Desde já agradeço.

    ResponderExcluir
  29. Nina Frainer Francisco

    uma imagem na tela toda não é possivel pq cada pessoa tem uma tela de tamanho diferente, então o que ficará bom para mim não será pra outros.

    mas a maioria usa resolução 1024x768, então uma imagem com a largura 990 ou 1000 fica bom.

    ResponderExcluir
  30. Essa resolução seria em centimetros, pixels, ou em aguma outra resolução?

    ResponderExcluir
  31. poxa ficou legal,troqueo o fundo do meu blog,mas só da pra ver em alguns lugares....

    tem como deixar o blog transparente,pra poder ver a imagem inteira ?
    as cores do widget num deixa ver,eu quero tirar éssas cores teria como tirar ?

    http://dumhackerdowhome.blogspot.com/

    ResponderExcluir
  32. http://dumhackerdowhome.blogspot.com

    o problema é que existem outras coisas com fundo(main, sidebar)..

    no modelo html do seu blog veja isso:

    background:#393f42 url(IMAGE-LINK-HERE/top.png)

    esse trecho aparece muitas vezes, tem duas coisas sobre isso, primeiro a parte url(IMAGE-LINK-HERE/top.png) está inutil pois não tem imagem, isso era para colocar uma imagem como fundo. outra coisa é a parte #393f42 isto é uma cor, que será usada como fundo.

    então se apagar esse trecho no html do blog o fundo das postagens, colunas irão sumir.

    ResponderExcluir
  33. obrigado pl dica,por inquanto tá dando certo .....blz fuiiiiii..
    qualquer coisa eu volto fl......

    ResponderExcluir
  34. Cara.. muito bom o Post...
    deu tudo certo..
    só estou com um pequeno problema
    coloquei a imagem pra se repetir verticalmente, mas entre uma imagem e outra tá ficando um pequeno espaço em branco...como eu faço pra q as imagens fiquem totalmente juntas?
    tá aí o código:
    body {background-image: url(http://img6.imageshack.us/img6/5307/semttuloexy.jpg);background-repeat: repeat-y ;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;

    ResponderExcluir
  35. ~| Jimmy |~

    o tal espaço em branco faz parte da imagem, talvez não tenha visto pois ela se confunde com o fundo, mas se postar ela num lugar de fundo preto ou escuro verá que o branco é da imagem.

    a solução é recortar a imagem e hospedar novamente, se tiver problemas para fazer isso envie a imagem para nosso email e faço pra você

    ResponderExcluir
  36. Olá amigo a img de fundo do blog já coloquei, mas gostaria de saber como faço para deixar transparente minhas colunas laterais fazendo assim com que a img de fundo apareça ao final dessas colunas,vou explicar melhor gostaria que essas colunas ficassem pretas ate o final e sim de onde não use mais para gadgets ficasse transparente.

    Meu muito obrigado!!!
    Jack

    ResponderExcluir
  37. Jackna pagina editar html procure pelo trecho abaixo, depois apague:
    background-color: #000000;
    border:2px solid #cc0000;

    e depois nas outras partes apague:
    border: 1px none #cc0000;
    e coloque no lugar, o trecho que apagou na primeira parte
    background-color: #000000;
    border:2px solid #cc0000;


    #outer-wrapper {
    width: 900px;
    margin:20px auto;
    padding:10px;
    text-align: left;
    font: normal normal 113% Arial, sans-serif;
    background: url() repeat;
    background-attachment: fixed;
    background-color: #000000;
    border:2px solid #cc0000;
    }
    #main-wrapper {
    background: url();
    width: 430px;
    border: 1px none #cc0000;
    margin: 10px 0px 0px 8px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #newsidebar-wrapper {
    background: url();
    width: 220px;
    border: 1px none #cc0000;
    margin: 10px 0px 0px auto;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #sidebar-wrapper {
    background: url();
    width: 220px;
    margin: 10px 5px 0px 0px;
    border: 1px none #cc0000;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    ResponderExcluir
  38. EU NÃO ENTENDI COMO É QUE SE COLOCA A IMAGEM!

    QUAL É A URL DA IMAGEM?

    ONDE A PESSOA COLOCA EM HLTM NO BLOG?

    COMO DEVE-SE COLOCAR?

    E OUTRAS PERGUNTAS QUE NÃO ENTENDI

    ATENCIOSAMENTE,

    EMERSON.

    ResponderExcluir
  39. na linha body {background-image: url(Url da Imagem);
    onde está url da imagem, tem que por o endereço da imagem, na postagem tem links que mostram onde hospedar a imagem

    depois tem que colocar na pagina editar html no seu blog, quando clica em layout ao lado tem uma guia editar html.

    ResponderExcluir
  40. eeu não to conseguindo
    eu coloquei o código depois da body
    o codigo fico assim:
    {background-image: url(http://img2.imageshack.us/img2/3042/tabua.png);
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-attachment: fixed}

    mais quando eu clico em salvar modelo, da certo
    mas quando eu vou visualizar o blog
    o fundo fica preto, e o codigo fica no topo da pagina, em cima do cabeçalho , o que eu fiz errado?

    ResponderExcluir
  41. Thiago Sguotina verdade o código ficaria assim:

    body{backgroud......

    e tudo isso que você postou, não é colocar só isso, tem que ter a palavra body fora das chaves

    as duas linhas que colocou
    background-repeat: repeat-x;
    background-repeat: repeat-y;

    são desnecessarias pois está dizendo que é pra imagem repetir horizontal e verticalmente, portanto o código poderia ficar somente assim:

    body{background-image: url(http://img2.imageshack.us/img2/3042/tabua.png);
    background-attachment: fixed}

    mas na pagina editar html já tem outras coisas no body, então é só acrescentar essas duas linhas de código da imagem de fundo sem esquecer de coloar ponto e virgula no final.

    ResponderExcluir
  42. Oi, Fabiano! Estou aqui de novo com minhas dúvidas!!! Não sei se é possível fazer o que quero: Quero colocar uma imagem que tenho, são lápis de cor que editei e deixei bem opacos, bem sem cor, apagadinhos como plano de fundo. Gostaria que todo o fundo do meu blog ficasse com esses lápis, todo o fundo ou pelo menos as laterais do blog. Já hospedei a imagem. Pego a url dela e colo entre as tags body, é isso? Bjos e obrigada!

    ResponderExcluir
  43. ABCDentre na pagina editar htmm e coloce o código desse jeito

    body {background-image: url(Url da Imagem);... e tudo mais que tiver na tag body do seu blog, não precisa apagar nada só colocar o trecho
    background-image: url(Url da Imagem)

    ResponderExcluir
  44. valeus!!!!Eu tava precisando de ajuda para fazer um blog bem legal... porque você também não dá algumas dicas do que colocar no blog, o meu não tem nada ainda.
    Mais uma vez,obrigado!!!!

    ResponderExcluir
  45. Parabens pelo blog.. pequei seu template e istalei no me blogs ficou shou de bola . valeu mesmo,, sempre venho aqui no seu blog pega algumas dicas..

    ResponderExcluir
  46. diga me um codigo para eu por no editar html desta imagem

    http://www.imotion.com.br/imagens/data/media/75/2885smile.jpg

    diga so o que eu tenho de colar quero que fique do lado direito e que se mexa

    ResponderExcluir
  47. Pedro Bragançaapenas coloque esse endereço da imagem no código junto com o body do seu blog pela pagina editar html, o código fica assim:

    body {background-image: url(http://www.imotion.com.br/imagens/data/media/75/2885smile.jpg);
    background-repeat: no-repeat;
    background-position: right top;...

    e mais o que já tem no html do seu blog

    ResponderExcluir
  48. Oi Fabiano por favor me tire uma dúvida!

    esse é o meu blog: http://academialu.blogspot.com/

    só q temk várias imagens minhas e eu queria colocar apenas uma logo no centro do blog mas eu ñ consigo entender como faz!

    por favor me ajude


    eis o codigo fonte:

    body {background-image: url(http://www.guiadopara.com.br/guia/entrevistas/lu.jpg);
    background-repeat: repeat-xy;
    background-attachment: fixed}

    ResponderExcluir
  49. Academia Lú

    no código que postou a linha background-repeat: repeat-xy; é desnecessaria pois faz a imagem repetir nos dois sentidos.

    minha sugestão é colocar assim:
    background-attachment: fixed;
    background-image: url(endereço da imagem);
    background-repeat: no-repeat;
    background-position: right top;
    }

    ou então deixar a imagem somente no titulo do blog

    ResponderExcluir
  50. nao entendi eu tentei fazer mas nao consigo
    precisa de ser mesmoum codigo para entrar em html
    a imagem é esta
    http://img141.imageshack.us/i/found.jpg/
    obrigada

    ResponderExcluir
  51. Dianne Belle

    você está usando o endereço errado da imagem, use esse aqui
    http://img141.imageshack.us/img141/8031/found.jpg

    ResponderExcluir
  52. sim eu ja tentei eu abri uma caixa de html para colar o codigo completo mas continuo sem conseguir
    ajude me

    ResponderExcluir
  53. Boa tarde, eu venho agradecer todas as dicas que me ajudaram muito desde que resolvi montar o meu primeiro blog, mas agora estou com uma dúvida, peguei um template seu e mudei algumas coisas, coloquei umas flores no topo más não pelo body e sim pelo metodo inserir imagens, agora eu quero tirar ela não sai e também não consigo colocar a imagem no fundo do blog, será que poderia me ajudar, meus parabéns por esse blog que auxilia tantas pessoas.
    obrigada
    Primary layout */
    body{background-color:#1B703A;background-image:url(http://i452.photobucket.com/albums/qq241/Neusa1962/liriobrancofundo.gif)
    background-attachment: fixed}

    ResponderExcluir
  54. Neusa, escreva para nosso email e mande o link de onde colocou o template
    fabiano1404@yahoo.com.br

    ResponderExcluir
  55. Olá Fabiano, seu blog é 10 e encontrei justamente o que queria, mas continuo com uma dificuldade. Estou querendo repetir a figura do background de forma que elas fiquem nas extremidades do blog. Já tentei mas não consigo. Será que você poderia me ajudar? o código é o q segue:

    #outer-wrapper {
    margin: 0 auto;
    border: 0;
    width: 995px;
    text-align: $startSide;
    background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top $endSide repeat-y;
    font: $bodyFont;
    }

    está para a esquerda, mas quero também na direita deixando o centro em branco... Agradeço desde já.

    ResponderExcluir
  56. não dá pra usar uma imagem de fundo somente nas laterias.

    crie uma imagem da largura total 995

    ResponderExcluir
  57. Nossa,quantas dicas ótimas,adoreiii....Já fiz algumas mudanças no meu,rsrs
    Beijinhos....

    ResponderExcluir
  58. Olá Fabiano, fiz as mudanças seguindo seu passo a passo, porém ao visualizar separou as colunas e não ficou do jeito que eu queria, que fiz de errado ?
    Visualize na pagina www.summer-foto.com.br e olhe a imagem original que queria em http://img8.imageshack.us/img8/6029/summerimage.jpg
    Muito grato pela paciência ...

    Cido Ribeiro

    ResponderExcluir
  59. Em tempo, aqui os códigos que coloquei no html ...
    body {
    background:url(http://img40.imageshack.us/img40/6029/summerimage.jpg);
    background-position: center;
    background-repeat: norepeat;
    background-attachment: fixed}
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    color:$mainTextColor;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    Grande abraço amigo

    ResponderExcluir
  60. SummeR

    é melhor escrever diretamente para nosso email

    se quiser deixar o site do jeito que está na imagem terá que usar uma imagem de fundo do body e o restante no #content-wrapper

    ResponderExcluir
  61. nossa que legal;é claro fiquei dias tentando mas consegui,olha como ficol,

    http://divasdooriente.blogspot.com.br

    È temtando que se aprende

    adorei!!!
    muuuito obrigada

    ResponderExcluir
  62. Este comentário foi removido pelo autor.

    ResponderExcluir
  63. Edna Lima

    veja essa postagem sobre transparencia das colunas do blog

    http://www.dicasparablogs.com.br/2009/07/fazer-fundo-semi-transparente-no-blog.html

    ResponderExcluir
  64. url, link ou endereço são a mesma coisa ou seja a url deste blog é http://dicasparablogs.com.br

    o mesmo vale para qualquer imagem a url do nosso banner é http://img29.imageshack.us/img29/8957/bannerdicas.gif

    ResponderExcluir
  65. bom dia Fabiano
    mto legal esse blog e as dicas...
    me diz uma coisa, eu quero botar uma imagem que fiz no photoshop com algumas fotos na lateral esquerda do blog, como se fosse uma margem, e deixar o restante com uma corzinha básica... dá pra colocar isso no background ?? onde que eu mudo o html e qual é o tamanho que deve ter a imagem ??
    Obrigada

    ResponderExcluir
  66. Déia
    tudo é no background.

    entre na pagina edtiar html, a cor de fundo da pagina inteira é no body

    você pode usar outras cores ou imagens de fundo para as postagens #main ou para as colunas #sidebar

    use a pesquisa que tem no topo do nosso blog para achar posicionamento ou imagem de fundo fixa, talvez goste dos efeitos

    ResponderExcluir
  67. Olá, existe outro site gerador de backgrouns além do profilegoo.com para que eu possa pegar a url? obgda

    ResponderExcluir
  68. Anônimo
    sinceramente eu não conheci o site profilegoo, mas não é preciso de um site para ter uma imagem de fundo, é só hospedar uma imagem e colocar no código do blog assim:
    background-image: url(endereço da imagem);

    para hospedar a imagem use o http://imageshack.us/ se tiver duvidas sobre o endereço certo da imagem veja aqui

    http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html

    ResponderExcluir
  69. como imagem de fundo não dá pra estender(esticar) a imagem só repetir ao lado

    ResponderExcluir
  70. Este comentário foi removido pelo autor.

    ResponderExcluir
  71. Ola.
    Olhe eu tenho estado ha varios dias tentando mudar o meu blog, mas nao consigo porque os codigos que as vezes aqui aparecem para torcar eu nao tenho no meu HTML.

    è assim, eu queria que a imagem do titulo do blog podesse ir de uma pontá á outra. E que o blog fosse um pouco maior e que a distancia entre as postagens e a barra lateral fosse um pouquinho maior.
    Me pode ajudar ?
    passe no meu blog se puder ajudar

    ResponderExcluir
  72. Marilena
    a imagem para ocupar a pagina inteira é necessário fazer a imagem no tamanho certo, ou seja saber qual a largura do seu blog.

    sobre o código para imagem de fundo se não tiver você deve colocar background url(endereço da imagem); dentro das chaves do body na pagina editar html.

    veja aqui se está usando o endereço certo da imagem
    http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html

    ResponderExcluir
  73. Ola !!
    Bom gostaria muuuito de uma ajudinha , pois eu tentei , tentei mas não consegui de forma alguma trocar o fundo do meu blog
    Gostaria de colocar essa imagem :
    http://4.bp.blogspot.com/_dAMu1vYMewU/SoGTn-41ZJI/AAAAAAAAAeo/d45xEiPsAG4/s1600-h/Bee+My+Honey+Bear.jpg.
    mas sem sucesso , li varias vezes todas as postagem e tentei tudo que foi ensinado aqui , mas pra variar devo estar fazendo algo errado . rssss
    Estou tentando colocar essa url , nesse lugar :
    body {
    margin: 0;
    text-align: center;
    min-width: 760px;
    background:url(http://4.bp.blogspot.com/_dAMu1vYMewU/SoGTn-41ZJI/AAAAAAAAAeo/d45xEiPsAG4/s1600-h/Bee+My+Honey+Bear.jpg) repeat-x $startSide top;
    color: $textColor;
    font-size: small;
    }
    Esta certo ??? Me ajude por favor !! Preciso de uma aulas .rsss

    ResponderExcluir
  74. Divina Ideia by Simone Lam
    use a linha da imagem de fundo assim:

    background-image: url(http://img34.imageshack.us/img34/1279/ursob.jpg)repeat-x $startSide top;

    ResponderExcluir
  75. Olá, bom dia.

    Bom, não é uma imagem que eu queria colocar mas sim um fundo com "efeito" assim tipo rugoso ou algo do género, para distinguir do "corpo" do blog.
    tenho procurado mas não acho nada que se pareça com o que quero, a não ser alguns wallpapers, mas isso dá-me ideia de que não posso usar.
    Que me aconselham?

    Obrigada.

    ResponderExcluir
  76. Olá, bom dia.

    Bom, não é uma imagem que eu queria colocar mas sim um fundo com "efeito" assim tipo rugoso ou algo do género, para distinguir do "corpo" do blog.
    tenho procurado mas não acho nada que se pareça com o que quero, a não ser alguns wallpapers, mas isso dá-me ideia de que não posso usar.
    Que me aconselham?

    Obrigada.

    ResponderExcluir
  77. S. Levy Lima
    pesquise sobre textura rugoso ou qualquer outro tipo que deseje, quando escreve fundo ou background na pesquisa geralmente mostra imagens para papel de parede do computador, por isso pesquisar por textura é melhor

    ResponderExcluir
  78. Cara você é dez,
    belo tutorial, vc só pode ser professor,
    fico muito bom esse tutorial e ajudo muiito,
    vlw por ter postado esse tutorial, tava precisando muitoo,
    qualquer coisa precisando volto aquiii...
    abrax

    ResponderExcluir
  79. E como eu faço pra que a imagem não fique fixa que nem no exemplo??

    ResponderExcluir
  80. para fixar é só colocar background-attachment: fixed junto com o código

    ResponderExcluir
  81. Valew mesmo cara..
    nem tive muito trabalho pra por minha imagem no blog..
    tudo que eu queria saber eu encontrei aki..
    suas dicas são massa!!!
    parabéns viu...
    vou divulgar seu trabalho!!!

    VALEW!!!

    ResponderExcluir
  82. Muito obrigado pela ajuda, estava tentando fazer a mudança do fundo ou background de meu blog a quase uma semana. Sua dica foi muito eficaz e fácil de compreender. Valeu, abraços...

    ResponderExcluir
  83. Finalmente consegui colocar minhas florzinhas no fundo do blog !!!
    valeu amigo !!

    siegrid

    ResponderExcluir
  84. Muiito bom, voce tah de parabens e muito obrigada, nossa faz seculos que procuro um site decente p me ensinar a colocar imagem no fundo do blog e eles so me confundiam, esse tah super bem explicado. Depois de ler o seu post eu n tenho mas receio de mexer no HTML rsrs...
    Muito obrigada mesmo... continue sempre assim seu site tah de Parabens.

    ResponderExcluir
  85. Socorrooooo Fabiano,inventei de deixar meu blog que estou montando com o seu jeitinho,só que não estou conseguindo.Quero a imagem em todo o blog,excerto no meio onde coloco as postagem mas,não estou conseguindo.A resolução de minha tela de 32 bits é 1024 por 768.Já estou ficando louca,já editei várias vezes a imagem,diminui,aumentei e nada ela só fica repetida e onde é o começo do blog fica branco e aparecendo somente a imagem com a logótipo do mesmo.Quero uma faixa somente nas laterais de cima a baixo.O que fiz de errado?Você me ajude?Isso não é uma dúvida,rs.Desde já muito obrigadooo!!!

    body {
    background: url(http://img196.imageshack.us/img196/259/imagem049i.jpg);right top; }
    margin: 0;
    padding: 0px;
    font: x-small Verdana, Arial;
    text-align: center;
    color: $textColor;
    font-size/* */:/**/small;
    font-size: /**/small;

    #outer-wrapper {
    font: $bodyFont;
    }

    /#header-wrapper {
    margin:0;
    padding: 0;
    background-color: $headerCornersColor;
    text-align: $startSide;
    }

    #content-wrapper {
    width: 760px;
    margin: 0 auto;
    padding: 0 0 15px;
    text-align: $startSide;
    background-color: $mainBgColor;
    border: 1px solid $borderColor;
    border-top: 0;
    }
    #main-wrapper {
    margin-$startSide: 14px;
    width: 464px;
    float: $startSide;
    background-color: $mainBgColor;
    #sidebar-wrapper {
    margin-$endSide: 14px;
    width: 240px;
    float: $endSide;
    background-color: $mainBgColor;
    display: inline; /* fix

    ResponderExcluir
  86. não é possivel ajustar uma imagem para todas as resoluções de tela, para não se repetir coloque background-repeat: no-repeat

    e veja aqui como posicionar a imagem de fundo
    http://www.dicasparablogs.com.br/2008/04/posicionar-imagem-de-fundo.html

    ResponderExcluir
  87. background-image: Entra como código também?

    Por que não tou axando isso lá no HTML do meu blog!

    ResponderExcluir
  88. Danilo Gomes | reCRIar - design
    se não achar essa parte deve colocar, isso faz parte quando for usar uma imagem como fundo.

    ResponderExcluir
  89. Cara, isso me ajudou bastante. Valeu mesmo, além de eu conseguir fazer, eu aprendia manipular esse e código e como ele funciona, através do código html, dá pra fazer bastante coisa legal, vlw!

    ResponderExcluir
  90. oi gostaria de saber como eu posso colocar uma imagem sobre a outra, de uma forma que a imagem maior fique por baicho da menor, e possivel? procurei em todo lugar e nao achei...obrigado

    ResponderExcluir
  91. Mauricio
    não dá pra usar duas imagens de fundo no mesmo lugar, o ideal seria já criar a imagem sobreposta

    ResponderExcluir
  92. Muito bom o código! Mas o problema é que a cor do texto fica preta, e as imagens que vão ficar boas no meu blog são prtas. E não tem como mudar a cor do texto no fontes e cores, continua a mesma. O que eu faço. Muito obrigado!

    ResponderExcluir
  93. veja aqui como formatar o texto
    http://www.dicasparablogs.com.br/2009/04/como-formatar-o-texto-do-blog.html

    ResponderExcluir
  94. Oi, suas dicas são muito boas.
    Segui essa dica da postagem ontem e hoje, mas altera a cor do link e não consigo consertar. Não estou conseguindo colocar um menu horizontal e não lembro qual a postagem que afasta as colunas.
    Ontem consegui afastar, mas como resolvi voltar com o template vou ter que refazer algumas coisas.
    Retiro a navbar e não consigo colocar o menu, já tentei várias dicas diferentes.
    Será que você pode me ajudar?
    poesy2006@yahoo.com.br
    Grata

    ResponderExcluir
  95. Ana Paula

    veja essa postagem sobre largura
    http://www.dicasparablogs.com.br/2007/08/largura-do-blog.html

    e essa sobre espaços vazios
    http://www.dicasparablogs.com.br/2007/08/template.html

    ResponderExcluir
  96. Muito bom, mas no IE, nao funcionou, só apareceu no F.F.
    De qualquer jeito, muito obrigado.

    ResponderExcluir
  97. 9+1 Downloads

    veja se colocou o endereço correto da imagem, talvez um dos navegadores esteja usando o historico de internet para acessar o blog

    ResponderExcluir
  98. Eu consegui ....mais eu quero que a imagem fique repitindo toda no blog ... olha como o meu ficoou

    {background-image: url(http://img204.imageshack.us/img204/2203/54832409.gif);
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-attachment: fixed}

    me ajuda ? vlw

    ResponderExcluir
  99. para se repetir pela pagina toda pode apagar essas 3 linhas
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-attachment: fixed

    ResponderExcluir
  100. Esta dica de imagem, me ajudou bastante. Ficou certinho!!

    ResponderExcluir
  101. so da

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.

    ResponderExcluir
  102. o meu blog o fundo ficou branco ,
    oque a de errado

    ResponderExcluir
  103. Lucas e Anônimo

    provavelmente os dois estão usando endereço de imagens erradas ou colocando alguma letra do código faltando ou a mais

    ResponderExcluir
  104. deu certo,consertei tudo o que faltava, valeu!

    ResponderExcluir
  105. oi por favor me ajude como eu posso tirar o nome blogspot do endereço do site?

    ResponderExcluir
  106. Hawan Sterffersson

    veja aqui como registrar um dominio


    http://www.dicasparablogs.com.br/2009/08/como-registrar-um-dominio.html

    ResponderExcluir
  107. desculpa encomodar....
    mas já tentei mil maneiras e nunca consigo!!

    pode me ajudar?
    o que eu estou fazendo mal?

    imagem - [URL=http://www.mh2img.net/showpic-30231/fundo_blog_copy.jpg][IMG]http://www.mh2img.net/thumb-30231.jpg[/IMG][/URL]

    eu colocolo no html:
    body {background-image: url
    (http://www.mh2img.net/showpic-30231/fundo_blog_copy.jpg][IMG]http://www.mh2img.net/thumb-30231.jpg[/IMG][/URL]);
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;

    desculpa, mas eu preciso mt da tua ajuda...

    ines.quaresma@gmail.com
    ines

    ResponderExcluir
  108. Anônimo

    você está usando o endereço errado da imagem, tente esse http://www.mh2img.net/showoriginal-30231/fundo_blog_copy.jpg

    veja também sobre hospedar imagens

    http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html

    ResponderExcluir
  109. obrigada pela ajuda agora eu coloquei:

    body {background-image: url
    (http://www.mh2img.net/showoriginal-30231/fundo_blog_copy.jpg);
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    mas o fundo ficou branco, na mesma!!!

    o que estou fazendo mal?

    ResponderExcluir
  110. o código parece certo, mas não tem espaço nem muda de linha entre url(.....

    ResponderExcluir
  111. Ola...
    Coloquei o plano de fundo... mas queria que so aparecesse as letras igual o seu.
    Fundo fixo... e somente as letras... mas a caixa original nao fica transparente no centro somente nas bordas... o que tenho que fazer?

    ResponderExcluir
  112. Regina Dimow, você está falando das letras do titulo deste blog? se for isso não é feito com imagem de fundo é Flash(programa)

    ResponderExcluir
  113. Eu coloquei o código lah em HTML e ficou assim

    body {

    {background-image: url(http://www.blogdowindows.com.br/wp-content/uploads/2009/09/mac-os-snow-leopard-wallpaper.png);background-position: left center;background-repeat: repeat-x;background-attachment: fixed}
    background-color: #ccddbb;
    margin:0;
    font: x-small Verdana, Sans-serif;
    text-align:center;
    color:#333;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    porém o fundo que estava verde, fica branco o que estou fazendo d errado?

    Briigada ^^

    ResponderExcluir
  114. Beatriz, se postou exatamente assim talvez seja pq abre duas vezes o estilo, veja que tem
    body {
    {background

    tem duas vezes abrindo a chave { deve apagar uma delas.

    outra coisa coloque a linha background-color: #ccddbb; no começo do código assim que abre a chave, senão alguns navegadores vão colocar a cor de fundo sobre a imagem assim o blog continuará verde

    ResponderExcluir
  115. Briiigadaaa vlw msmo!!1 agora ta funcionando perfeitamente!!! =D

    Só tem uma coisa a imagem que eu estou usando precisa ser duplicada verticalmente, e bom não fica lá aquelas coisas pois a diferença de tonalidade eh grande será que tem como ao ínvez do fundo ser fixo ele se mover a medida que a pessoa move o scrol?

    ResponderExcluir
  116. para a imagem de fundo não se repetir coloque isso junto com o código
    background-repeat: no-repeat;

    ResponderExcluir
  117. Você está de parabéns!
    gostaria de saber se tem como colocar uma imagem centralizada no topo, sem repetir, como um cabeçalho. Logo abaixo, uma imagem repetindo até embaixo. E no fundo uma imagem centralizada, como um rodapé.

    Obrigado desde já!

    ResponderExcluir
  118. Lucas C. M., os códigos podem variar conforme o modelo, mas a imagem no topo você colocar em #header-wrapper
    e a que se repetirá pela pagina em #content-wrapper
    depois na parte #footer-wrapper coloque a imagem de rodapé

    os códigos para imagens de fundo são iguais os desta postagem para colocar um fundo no blog

    ResponderExcluir
  119. Fabiano, tentei fazer o que você me indicou. Mas não funcionou... teria como você me ajudar? Estou editando o template minima. Preciso terminar esse template até sabado. Estou preocupado de não dar tempo...
    Obrigado desde já por tentar me ajudar. Ah... estou usando as dicas do teu blog para montar meu template.
    Parabéns pelo blog!

    ResponderExcluir
  120. Lucas C. M.
    veja se está usando o link certo da imagem de fundo.

    veja mais aqui
    http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html

    ResponderExcluir
  121. Fabiano, tentei inumeras vezes... mas nunca notava alterações... as imagens não apareciam. Tenho certeza que estou usando o link correto. Teria como você me mandar o codigo e onde, exatamente, devo os colocar no template "minima"?

    Obrigado desde já.
    Ah, consegui resolver o problema com as imagens ao passar o mouse.

    ResponderExcluir
  122. Lucas C. M.

    qual o código que está colocando e em qual parte do html?

    ResponderExcluir
  123. cabeçalho, meio, rodapé, respectivamente [mudanças em negrito]


    #header-wrapper {
    width:900px;
    background:#000000;
    background-image: url (http://img22.imageshack.us/img22/8347/86984566.png) no-repeat;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }


    #outer-wrapper {
    background:#000000;
    background-image: url (http://img22.imageshack.us/img22/8347/86984566.png) repeat-y;
    width: 900px;
    margin:0 auto;
    padding:0px;
    text-align:$startSide;
    font: $bodyfont;
    }

    #footer {
    width:900px;
    background:#000000;
    background-image: url (http://img22.imageshack.us/img22/8347/86984566.png) no-repeat;
    clear:both;
    margin:0 auto;
    padding-top:15px;
    line-height: 1.6em;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align: center;
    }

    ResponderExcluir
  124. é estranho não funcionar o código parece certo, mas retire as linhas background:#000000;

    mas a cor de fundo do corpo do blog(postagens e menu) está em

    #outer-wrapper {
    background: #1472a0;

    e depois somente das postagens em
    #main-wrapper {
    background: #ffffff;

    ResponderExcluir
  125. seu blog deve estar com algum problema no html, procure e apague os backgrounds que achar, faça isso um por vez até achar onde está o problema

    ResponderExcluir
  126. Fabiano, acho que ouve um mal entendido. Quando disse que queria colocar uma imagem no cabeçalho, eu estava me referindo à parte do "body" que fica no topo da pagina, e a mesma coisa com o meio e embaixo(rodapé)...

    ResponderExcluir
  127. a parte do body é o fundo do blog todo, mas mesmo assim poderia deixar outras cores ou imagens debaixo das postagens e menu

    se quiser colocar a imagem de fundo no blog use o código do background em body{...

    e retire os trechos que deixou em negrito no codigo que postou nos outros comentários

    ResponderExcluir
  128. Eu peguei uma foto que eu tinha no computador e coloquei no orkut pra depois pegar a url dela e colocar no blog, já que eu não consigo de forma alguma pegar a foto direta do computador! ¬¬
    Depois fiz isso aí que vc falou mas não ta dando certo e agora o blog não da nem pra trocar a COR de fundo. Me ajuda, please!

    ResponderExcluir
  129. talvez não consiga enviar direto para o blog por causa do tamanho da foto ou o formato que ela está salva no seu computador

    sobre a imagem de fundo se alterar os códigos nos lugares certo funcionará perfeitamente, mas alguns templates tem cores ou imagens de fundo em varias partes do código, então é necessário retirar as que estiverem atrapalhando

    ResponderExcluir
  130. Boa tarde!
    Estou sempre visitando este cantinho, mais nunca deixei um comentário, peço mil desculpas por essa mancada graças a vcs estou deixando meu blog do jeito que quero, aprendi varias coisas bacanas aqui e espero aprender mais. Só tenho que agradecer a vcs, muito obrigado.

    ResponderExcluir
  131. eu ponho assim:
    body {background-image: url(http://img239.imageshack.us/img239/8158/nv6bk3.jpg);
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-attachment: fixed}

    mas a unica diferença é que fica branco e o meu blog é preto!

    http://ninadainteressante.blogspot.com/

    ResponderExcluir
  132. Ótima dica, mas eu não estou conseguindo =[
    O Template do meu blog nao é um padrão do blogspot.
    O meu template eu peguei no ourblogtemplates.com
    Será que isso afeta o processo de colocação da imagem?

    O código normal do body é esse:
    body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    color: $textColor;
    background: $bodybgColor url() repeat top right;
    /* background-attachment: fixed; */
    font-family: arial,verdana,helvetica,tahoma,Sans-serif;
    font-size: 100%;
    width: 100%;
    }


    O código que eu editei é esse:
    body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    color: $textColor;
    background: $bodybgColor url(http://4.bp.blogspot.com/_Ld6r2YClH8U/R5495FObFlI/AAAAAAAAAJs/0Y4E40Dgkrw/s1600-h/poster+cometa2.jpg) repeat top right;
    background-attachment: fixed;
    font-family: arial,verdana,helvetica,tahoma,Sans-serif;
    font-size: 100%;
    width: 100%;
    }

    Mas mesmo assim não funcionou. Pode me ajudar? Desde já agradeço.

    ResponderExcluir
  133. Júnior
    entrei no seu blog agora e a imagem de fundo está aparecendo, mas se quiser junto com o código do body no seu blog tem background-color: #ccddbb; e você poderia apagar isso, já que está usando uma imagem.

    Xhandy
    troque esse trecho
    background: $bodybgColor url(http://4.bp.blogspot.com/_Ld6r2YClH8U/R5495FObFlI/AAAAAAAAAJs/0Y4E40Dgkrw/s1600-h/poster+cometa2.jpg)

    por

    background-image: url(http://4.bp.blogspot.com/_Ld6r2YClH8U/R5495FObFlI/AAAAAAAAAJs/0Y4E40Dgkrw/s1600-h/poster+cometa2.jpg);

    mas sugiro salvar a imagem e hospedar no imageshack

    ResponderExcluir
  134. Acabei de tentar o que vc falou Fabiano, mas não rolou.
    O máximo resultado que eu consegui é que a imagem de fundo funcionou, porém o fundo branco do blog sobrepos a imagem e somente as bordas mostram a imagem.

    Veja como ficou: http://nonaartequadrinhos.blogspot.com/

    Eu entendo um pouco de html mas to tomando mó surra. Teria como eu deixar sem cor de fundo no blog?
    pq afinal o fundo é q está se sobrepondo.

    ResponderExcluir
  135. Sou eu de novo XD, mas dessa vez com uma boa notícia.
    Fuçei, fuçei e fuçei e consegui.

    Curioso pra saber o problema né?
    Era bem simples, o blog tinha várias camadas e colunas diferentes e cada camada e coluna tinha um background diferente na html.

    A solução?
    Todo comando de background eu substituí pelo comando de imagem ao fundo. Simples assim (é tão simples que to feliz e com raiva ao mesmo tempo)

    Te agradeço muito, pelo tutorial e principalmente pela atenção.
    Obrigadão Fabiano e parabéns pelo ótimo blog/site.

    ResponderExcluir
  136. Já tô com dor de cabeça de tanto tentar, mas tenho certeza de que stou fazendo tudo errado...
    Vê como ficou:

    body {background-image: url
    (http://img691.imageshack.us/img691/1466/carriestephenssdspottyd.jpg);background-position: left center;background-repeat: no-repeat;background-attachment: fixed}
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;

    a:link {
    color:#cc0000;
    text-decoration:none;
    }
    a:visited {
    color:#cc0000;
    text-decoration:none;
    }
    a:hover {
    color:#000000;
    text-decoration:underline;
    }
    a img {
    border-width:0;
    }

    E aí?
    Tem solução?

    ResponderExcluir
  137. Dani Toscano

    o unico erro que consegui ver é fechar o estilo body no lugar errado
    body {background-image: url
    (http://img691.imageshack.us/img691/1466/carriestephenssdspottyd.jpg);background-position: left center;background-repeat: no-repeat;background-attachment: fixed}
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;

    o sinal } que está em negrito deveria ser aqui no final depois desse ultimo center;



    outra coisa a imagem de fundo que está usando é grande demais tente recorta-la ou usar uma menor

    ResponderExcluir
  138. Saudações
    Obrigado pela sua ajuda. foram fantasticos.
    Consegui colocar a foto no fundo mas a imagem não esta expandida. Já vi que isso acontece por causa das telas. (www.estereopositivo.blogspot.com)

    Queria tirar o titulo do blog e não consigo.

    Não encontro a formula do Html de forma a mudar de True para False.

    Podem ajudar?

    Obrigado

    ResponderExcluir
  139. Boa tarde, preciso colocar uma imagem de fundo no blog...eu mesma fiz a arte, salvei em jpeg. Depois abri no dreamweaver e coloquei a imagem como fundo.

    Salvei e copiei o codigo na parte de editar HTML:

    body {
    background-image: url(camilla_perrotta_fundo.jpg);
    background-repeat: repeat-y;
    }

    mas não deu certo...nada muda!

    Preciso de sua ajuda!!!

    Obrigada.

    ResponderExcluir
  140. Rafael Amorim
    a imagem de fundo não expandi, ela ficará do tamanho que você colocou na internet

    camila
    você precisa hospedar a imagem e colocar o endereço no código, do jeito que colocou não funcionará.

    veja aqui
    http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html

    ResponderExcluir
  141. Fabiano fiz como vc orientou, mas mesmo assim não deu certo. Daí tentei tb seguir as orientações nesse site: http://www.thecutestblogontheblock.com.
    Mas, tb foi uma tentativa em vão. Será que tem algo bloqueado que me impede de mudar a imagem de fundo? Isso seria possível? E , se sim, como reverter?
    Meu blog é: http://euamoscrap.blogspot.com

    Obrigada pela paciência, vejo que vc tem verdadeira paixão pelo que faz. Parabéns!

    ResponderExcluir
  142. Dani Toscano
    faça um teste entre no html do seu blog e onde tem

    body {
    background:#ffffff;
    margin:0;


    troque o background:#ffffff; por
    background-image: url(http://img708.imageshack.us/img708/1793/corpo.gif);

    ficará estranho pq esse é o fundo do menu blog, mas é só pra testar, depois é só trocar o endereço da imagem

    ResponderExcluir
  143. Hihihihi
    Eu de novo...
    Tô tentando fazer no corel a imagem que eu quero pra hospedar no imageshack. Mas, não tô conseguindo acertar o tamanho. vc sabe me dizer qual?

    ResponderExcluir
  144. o melhor é usar uma textura ou fixar a imagem de fundo veja aqui


    http://www.dicasparablogs.com.br/2008/04/imagem-de-fundo-fixa.html


    ajustar o tamanho da imagem não dá pois cada pessoa tem uma tela diferente ou seja o que ficará bom no meu computador pode não ficar no seu.

    ResponderExcluir
  145. oi, tô precisando de ajuda de novo... coloquei uma imagem no fundo, mas queria que ela ficasse parada e só o conteúdo rolasse. Tem como?
    Dá uma olhadinha no meu blog por favor e vê se tem alguma coisa errada...
    http://euamoscrap.blogspot.com
    Valeu!

    ResponderExcluir
  146. euamoscrap

    o código que colocou está certo só faltou colocar o ponto e virgula no final desta linha

    background-attachment: fixed;

    ResponderExcluir
  147. Nossa Fabiano muito obrigada pelo suporte, agora deu certo. rsrsrs
    Consegui fazer uma imagem no Corel e acertar o tamanho e agora deixei ela paradinha do jeito que eu queria.
    Parabéns pelo teu blog, demais mesmo!

    ResponderExcluir
  148. Muito obrigado...
    Me ajudou muito...
    Esse blog é o máximo

    ResponderExcluir
  149. Muito bom! Funcionou no meu blog de testes e pretendo colocar no meu blog normal

    ResponderExcluir
  150. Não consegui colocar a foto! Me ajudaaaa!

    ResponderExcluir
  151. Bom dia a todos, estou começando agora com meu blog, e pessoas como vocês que dão informação gratuita devem ser valorizadas, eu estava pensando em que tipo de assunto postar em meu blog e acho que vou seguir o exemplo de voces, vou buscar informação e dividi-la com os outros.
    Parabéns

    ResponderExcluir
  152. ae =)

    adorei o fixed

    eu tava muito querendo
    deixa meu fundo la paradinho
    agora so tenhu q afina o
    conteudo agora
    pra aparecer minha img. d fundo
    vlw

    ResponderExcluir
  153. mas o meu blogger é assim:
    body {
    background:$bgcolor;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    não tem nada de background-image

    ResponderExcluir
  154. Jurassik Dark , a linha background:$bgcolor; é uma cor de fundo, troque o trecho $bgcolor; por #000000; que o fundo do blog ficará preto, veja aqui outras cores

    Código das Cores

    ResponderExcluir
  155. Caraaaaaaaaaamba !
    eu conseguiiiiiiiii !
    obriiiiiiiigada !

    ResponderExcluir
  156. não consegui,quando eu vou colocar o fundo,da um erro:
    Corrija o erro abaixo e envie o seu modelo novamente.
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Content is not allowed in prolog.

    ResponderExcluir
  157. anonimo não tem muito o que posso ajudar é impossivel saber qual o erro em alterar o template, somente olhando o código na hora de salvar.

    ResponderExcluir
  158. Não entendi,eu estou a mêses tentando descobrir como se faz isso e ainda não sei.... eu quero botar uma foto em todo o blog só que eu não entendo isso de html eu coloquei esses codigos( em qualquer lugar que eu vi) e não ai eu selecionei salvar modelo e não adiantou nada continuou o mesmo........ por favor se precisso da sua ajuda me manda a resposta pelo meu e-mail: niely_linha@hotmail.com
    e manda com print screen systrq para mim poder ver como que se faz isso....obrigada

    ResponderExcluir
  159. para alterar a imagem de fundo entre na pagina editar html e procure por body, se já tiver algo como background apague e coloque assim:

    body{background-color: #FF9933;background-image: url(endereço da imagem);......}

    no lugar dos pontinhos é o restante do código que tinha no body

    e só precisa colocar o enderço da imagem no lugar indicado

    veja aquisobre problemas com imagem que não aparece

    ResponderExcluir
  160. ei fabiano uma perguntinha, tipo eu tenho um blog de animes, e eu gostaria que tipo aparessecem 3 fundos, como eu faria tipo pra cada hr que se entra no blog apareça 1 fundo e depois o outro, tipo eu nao quero apenas o mesmo que que mude, tem como?

    ResponderExcluir
  161. acho que não tem como mudar a imagem de fundo automaticamente.

    ResponderExcluir
  162. acho que vc nao entendeu, nao e mudar automaticamente, mas sim a cada vez que entrar no blog, estar com um fundo diferente, ja vi isso com banners em alguns blogs, e queria saber se é possivel fazer o mesmo com o fundo

    ResponderExcluir
  163. mas fazer que cada vez que a pessoa visite o blog apareça um fundo diferente é mudar automaticamente, não tem como fazer, alias tem como fazer mas precisa de varios códigos e não sei se o blogger vai aceitar todos, nunca tentei.

    pesquise no google sobre isso e achar varios códigos então é só testar e ver se algum deles funciona no blogger.

    ResponderExcluir
  164. hum entao tava querendo fazer com meu banner mas ele esta diferente ele esta assim o:


    width:940px;
    height:214px;
    clear:both;
    margin:0;
    background: url('http://img6.imageshack.us/img6/9963/topoyh.png') no-repeat;
    }
    #header {
    height:237px;
    clear:both;
    }

    o correto nao era estar entre chaves tipo <>...

    ResponderExcluir
  165. está certo o código como colocou aqui, isso é CSS ele não usa os sinais < >

    ResponderExcluir
  166. tipo tava vendo no codigo fonte de um blog por ai, e o banner deles esta entre chaves e nao css, e ele muda automaticamente, tentei colocar no meu mas n tive exito, sera que vc teria ideia de como fazer?

    ResponderExcluir
  167. adorei mais nao consigo se quiser visitar meu blog eu ficaria muito grata beijos o template é original do blogger nao modifiquei nada só mechi no layout algumas coisas http://karolinfaction.blogspot.com/

    ResponderExcluir
  168. talvez seja problema do seu computador, entrei no blog agora e parece normal
    exclua o histórico de internet.

    ResponderExcluir
  169. Não estou conseguindo colocar a imagem de fundo eu coloco o codigo mas fica tudo igual

    ResponderExcluir
  170. Larissa
    as vezes o código tem cor de fundo também ou outras partes do código usam outras cores ou imagens de fundo, e uma pode atrapalhar a outra, então é preciso retirar o que estiver sobrepondo a imagem de fundo.

    qual o link do blog que está com o problema e qual o endereço da imagem que está usando?

    ResponderExcluir
  171. Amigo estou querendo por uma imagem fixa no espaço do post, isto é que ela fique de fundo ao invez de cor, saber como posso fazer?
    Te agradeço desde já por seu auxílio
    Abraços forte

    ResponderExcluir
  172. Principe Encantado
    você precisa criar um estilo .post no html do seu blog usando os códigos que mostramos aqui para fixar imagens.

    ResponderExcluir
  173. Obrigado amigo, porém não sei criar este estilo poderia me dar uma "mãozona", me ajudaria bastante, sem te explorar é claro.
    Abraçaos forte

    ResponderExcluir
  174. o estilo seria assim:

    .post{background-image(endereço da imagem)};

    ResponderExcluir
  175. Como fazer com que a imagem acompanhe o conteúdo escrito, postagem, comentários... Como aqui nos comentários do dicas para blogs?
    Fabiano de uma olhadinha, por favor. Veja em que estou errando... Ainm!!!
    http://estareisempretentando.blogspot.com (Blog de teste)

    ResponderExcluir
  176. natalia, não entendi sua pergunta, qual imagem acompanha os comentários e postagens?

    ResponderExcluir
  177. A imagem de fundo.
    Estou tentando colocar uma imagem de fundo, mas com a rolagem do maouse a imagem acaba e a postagem continua... Veja, por favor, Fabiano http://estareisempretentando.blogspot.com (Blog de teste)!!!

    ResponderExcluir
  178. Natália
    a imagem de fundo não acompanha as postagens, não tem como alterar isso, o que poderia ser feito é cortar a imagem e trocar no html o problema é que as bordas da moldura tem muito relevo, então não fica por igual.

    faça um teste entre no html do seu blog e troque o trecho

    #header-wrapper {width:980px;
    background-image: url(http://i901.photobucket.com/albums/ac217/amaratedoer/Novopedassimdimim.jpg);
    text-align: center;
    background-repeat: no-repeat; display:none;
    }

    por

    #header-wrapper {width:980px;
    background-image: url(http://img576.imageshack.us/img576/7608/fundobg.jpg);
    text-align: center;

    }

    ResponderExcluir
  179. Fabiano em que parte coloco o código .post{background-image(endereço da imagem)};
    Abraços

    ResponderExcluir
  180. Principe Encantado
    você coloca esse código no html do blog, junto com #main{..} ou body{...}

    não faz diferença o lugar, apenas não misture os códigos, as chaves tem que abrir e fechar

    ResponderExcluir
  181. NÃO CONSIGO ACHAR O CÓDIGOOOO AJUDAAA

    ResponderExcluir
  182. na verdade você tem que procurar por body{... todo o resto depende da sua pagina e são coisas que deve alterar dependendo de como quer a imagem de fundo, o importante é achar o estilo body

    ResponderExcluir
  183. Obrigado Fabiano funcionou, ajudou bastante.
    Abraços forte

    ResponderExcluir
  184. Olá amigo
    Estou tentando postar fotos , mas elas estao repetindo, o que pode estar acontecendo de errado

    ResponderExcluir
  185. fogo Fabiano tu es demais.exelente trabalho.adoro quando as coisas correm bem. tudo o que faco no meu blog atraves deste site,resulta e bate certinho.muito obrigado again.
    mega abraco

    ResponderExcluir
  186. ola Roberto mais um vez:-)
    Mas tenho coloquei o codigo assim:
    body {background-image: url(http://www.dreiden.com/downloads/1024X768_smoke.jpg)
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);

    Mas nao muda nada, fica na mesma. achei estranho...alguma ajuda seria bem vinda. obrigado

    ResponderExcluir
  187. dwerso
    você precisa apagar essa ultima linha background: $(body.background); isso gera outra cor de fundo

    ResponderExcluir
  188. mudou mas ficou tudo branco. eu acho que tenho de fazer algo mais. porque estou a ausar um modelo do blogger.nao sei bem onde pode estar mal. tou com duvidas...abraco

    ResponderExcluir
  189. qual o código que está usando para modificar a imagem de fundo? publique aqui o trecho completo do body{...}

    ResponderExcluir
  190. ----------------------------------------------- */
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }

    html body .content-outer {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    }

    a:link {
    text-decoration: none;
    color: $(link.color);
    }

    a:visited {
    text-decoration: none;
    color: $(link.visited.color);
    }

    a:hover {
    text-decoration: underline;
    color: $(link.hover.color);
    }

    .body-fauxcolumn-outer .cap-top {
    position: absolute;
    z-index: 1;

    height: 276px;
    width: 100%;

    background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
    _background-image: none;
    }

    /* Columns
    ----------------------------------------------- */ esta assim agora que tirei o codigo. mas antes tava assim:
    body {background-image: url(http://www.dreiden.com/downloads/1024X768_smoke.jpg)
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);


    o que sera...

    ResponderExcluir
  191. no trecho
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }
    tente apagar a linha background: $(body.background); e colocar essa no lugar:

    background-image: url(http://www.dreiden.com/downloads/1024X768_smoke.jpg);

    ResponderExcluir
  192. Totalmente simples e fácil de entender aprendi na hora como usar um fundo fixo e muitas outras coisas sobre HTML.
    VLW
    by:Fredo9986

    ResponderExcluir