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.

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}

Clique aqui e veja um exemplo de site com imagem de fundo fixa

Assuntos relacionados:
Colocar os retirar margens no blog
Onde e como hospedar imagens
Código html das cores para usar nos estilos CSS
Como formatar o texto do blog

Link para esta página
<a href='http://www.dicasparablogs.com.br/2007/11/imagem-no-fundo-do-blog.html'>Imagem no fundo do blog</a>

Recomende por E-mail

203 comentários:

«Mais antigas ‹Antigas 1 – 200 de 203 Recentes› Mais recentes»

Anônimo disse...: num entendi nada; 17 de novembro de 2007 15:18
Anônimo disse...: MUITO BOM, ME AJUDOU BASTANTE.; 27 de janeiro de 2008 01:22
espiral azul disse...: como coloco uma imagem em cada canto
nao consigo ja tentei d etudo mais sempre fica ou no canto esquerdo ou direito; 14 de março de 2008 21:34
Anônimo disse...: tem como eu mudar o tamanho da imagem; 25 de maio de 2008 10:19
Fabiano Roberto disse...: 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..); 25 de maio de 2008 14:07
Nátulcien Linwëlin disse...: 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; 20 de julho de 2008 00:58
Shirley Jaires disse...: Também não entendi muito nao... não sei onde colocar o código... peo ajuda!; 29 de julho de 2008 12:50
Fabiano Roberto disse...: Shirley Jaires

o código para alterar a imagem de fundo deve ser colocado pela pagina editar html, na tag body; 29 de julho de 2008 13:27
*¨*Ellaehcarioca*¨* disse...: 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; 20 de agosto de 2008 19:11
Dadinho disse...: Boa noite!
Eu queria saber pq nao consigo colocar emoticons no meu blog.
Ja tentei fazer como ensinam por aí mas nao consegui!
Obrigado.; 19 de setembro de 2008 23:20
jonathanhess disse...: Adorei aqui deu certinho tudo que você citou na postagem!; 5 de outubro de 2008 11:43
Lista RW disse...: Boas! não consigo mter a imagem de fundo! =(; 19 de outubro de 2008 10:29
Que seja intenso enquanto dure... disse...: olá não consigo eu fço como esta escrito no tag body{, mas não aparece nada coloco visualiza e fica tudo branco.; 29 de outubro de 2008 10:08
Anônimo disse...: 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 :'(; 10 de novembro de 2008 18:36
Fabiano Roberto disse...: 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.; 11 de novembro de 2008 13:44
URBI Moda Feminina disse...: o Código é enorme onde posso incluir esse código para colocar uma imagem inteira em toda a página?
Valeu!!; 24 de novembro de 2008 22:04
URBI Moda Feminina disse...: o Código é enorme onde posso incluir esse código para colocar uma imagem inteira em toda a página?
Valeu!!; 24 de novembro de 2008 22:04
Fabiano Roberto disse...: 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.; 25 de novembro de 2008 14:53
URBI Moda Feminina disse...: Pois é, Fabiano

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

Obrigadaa; 30 de novembro de 2008 23:15
sergiodu.rep disse...: 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.; 25 de janeiro de 2009 16:45
Fabiano Roberto disse...: sergiodu.rep

você tentou colocar a url errada.

coloque isso dentro do body:

background-image: url(http://img239.imageshack.us/img239/8158/nv6bk3.jpg);; 25 de janeiro de 2009 17:31
sergiodu.rep disse...: Obrigado pela dica.
Ficou show!!!; 29 de janeiro de 2009 00:43
Pati disse...: 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;
}; 17 de fevereiro de 2009 08:52
Fabiano Roberto disse...: Paty

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

isso faz repetir horizontalmente.; 17 de fevereiro de 2009 13:57
jean disse...: como eu faço o fundo ficar transparente no internet explorar? eu fiz no firefox deu sertim dae fui vizualizar no internet ficou orrivel; 24 de fevereiro de 2009 07:53
Fabiano Roberto disse...: 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; 24 de fevereiro de 2009 14:12
Bruno Claro disse...: 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?; 1 de março de 2009 05:28
Fabiano Roberto disse...: 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);; 1 de março de 2009 13:44
Anônimo disse...: Muito bom cara, Obrigado pela ajuda!; 2 de março de 2009 09:13
Denis disse...: Opa valeu a dica!; 15 de março de 2009 20:39
Nina Frainer Francisco disse...: 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.; 21 de março de 2009 23:56
Fabiano Roberto disse...: 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.; 22 de março de 2009 00:10
Nina Frainer Francisco disse...: Essa resolução seria em centimetros, pixels, ou em aguma outra resolução?; 22 de março de 2009 22:12
Fabiano Roberto disse...: a resolução é em pixels.; 22 de março de 2009 23:03
jair.vasconcelos@yahoo.com.br disse...: 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/; 25 de março de 2009 18:53
Fabiano Roberto disse...: 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.; 26 de março de 2009 13:58
jair.vasconcelos@yahoo.com.br disse...: obrigado pl dica,por inquanto tá dando certo .....blz fuiiiiii..
qualquer coisa eu volto fl......; 26 de março de 2009 22:57
~| Jimmy |~ disse...: 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;; 11 de abril de 2009 18:07
Fabiano Roberto disse...: ~| 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ê; 11 de abril de 2009 18:38
Jack disse...: 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; 20 de abril de 2009 04:14
Fabiano Roberto disse...: 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 */
}; 20 de abril de 2009 18:43
Emerson disse...: 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.; 21 de abril de 2009 00:11
Fabiano Roberto disse...: 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.; 21 de abril de 2009 01:47
Thiago Sguoti disse...: 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?; 24 de abril de 2009 14:56
Fabiano Roberto disse...: 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.; 24 de abril de 2009 17:58
ABCD disse...: 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!; 25 de abril de 2009 22:58
Fabiano Roberto disse...: 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); 25 de abril de 2009 23:12
blog do marcelo disse...: 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!!!!; 26 de abril de 2009 23:18
Jogos para celular disse...: 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..; 30 de abril de 2009 23:58
Pedro Bragança disse...: 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; 1 de maio de 2009 15:15
Fabiano Roberto disse...: 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; 1 de maio de 2009 20:02
Academia Lú disse...: 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}; 2 de junho de 2009 18:55
Fabiano Roberto disse...: 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; 3 de junho de 2009 16:20
Dianne Belle disse...: 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; 14 de junho de 2009 02:02
Fabiano Roberto disse...: Dianne Belle

você está usando o endereço errado da imagem, use esse aqui
http://img141.imageshack.us/img141/8031/found.jpg; 14 de junho de 2009 04:35
Dianne Belle disse...: sim eu ja tentei eu abri uma caixa de html para colar o codigo completo mas continuo sem conseguir
ajude me; 14 de junho de 2009 14:43
Neusa disse...: 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}; 16 de junho de 2009 15:46
Fabiano Roberto disse...: Neusa, escreva para nosso email e mande o link de onde colocou o template
fabiano1404@yahoo.com.br; 16 de junho de 2009 16:23
Coração Novo disse...: 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á.; 17 de junho de 2009 15:09
Fabiano Roberto disse...: não dá pra usar uma imagem de fundo somente nas laterias.

crie uma imagem da largura total 995; 17 de junho de 2009 15:28
Regina disse...: Nossa,quantas dicas ótimas,adoreiii....Já fiz algumas mudanças no meu,rsrs
Beijinhos....; 30 de junho de 2009 16:41
SummeR disse...: 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; 8 de julho de 2009 11:00
SummeR disse...: 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; 8 de julho de 2009 11:05
Fabiano Roberto disse...: 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; 8 de julho de 2009 11:47
silwia disse...: nossa que legal;é claro fiquei dias tentando mas consegui,olha como ficol,

http://divasdooriente.blogspot.com.br

È temtando que se aprende

adorei!!!
muuuito obrigada; 14 de julho de 2009 19:25
Edna Lima disse...: Esta postagem foi removida pelo autor.; 23 de julho de 2009 14:16
Fabiano Roberto disse...: 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; 23 de julho de 2009 14:36
LukiinhaH ° disse...: O Que é URL Pelo Amor de Deus !?; 23 de julho de 2009 23:54
Fabiano Roberto disse...: 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; 24 de julho de 2009 13:33
Déia disse...: 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; 29 de julho de 2009 12:17
Fabiano Roberto disse...: 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; 29 de julho de 2009 14:12
Anônimo disse...: Olá, existe outro site gerador de backgrouns além do profilegoo.com para que eu possa pegar a url? obgda; 30 de julho de 2009 18:38
Fabiano Roberto disse...: 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; 31 de julho de 2009 13:52
*Coloryes* disse...: Tem como eu estender a imagem?; 31 de julho de 2009 16:07
Fabiano Roberto disse...: como imagem de fundo não dá pra estender(esticar) a imagem só repetir ao lado; 31 de julho de 2009 18:16
raulengel disse...: Esta postagem foi removida pelo autor.; 7 de agosto de 2009 11:46
Marilena' disse...: 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; 9 de agosto de 2009 12:30
Fabiano Roberto disse...: 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; 9 de agosto de 2009 13:23
Divina Ideia by Simone Lam disse...: 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; 12 de agosto de 2009 16:29
Fabiano Roberto disse...: 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;; 12 de agosto de 2009 17:02
S. Levy Lima disse...: 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.; 21 de agosto de 2009 05:38
S. Levy Lima disse...: 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.; 21 de agosto de 2009 05:38
Fabiano Roberto disse...: 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; 21 de agosto de 2009 13:14
Exxx Two disse...: 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; 21 de agosto de 2009 15:31
Xd disse...: E como eu faço pra que a imagem não fique fixa que nem no exemplo??; 22 de agosto de 2009 09:23
Fabiano Roberto disse...: para fixar é só colocar background-attachment: fixed junto com o código; 22 de agosto de 2009 11:09
A alma de Um Guerreiro Nunca Morre disse...: 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!!!; 30 de agosto de 2009 11:23
Marson disse...: 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...; 1 de setembro de 2009 19:50
Uma aquariana... disse...: Finalmente consegui colocar minhas florzinhas no fundo do blog !!!
valeu amigo !!

siegrid; 7 de setembro de 2009 14:16
Vicky disse...: 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.; 20 de setembro de 2009 14:33
Vera Vinhático disse...: 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; 25 de setembro de 2009 22:03
Fabiano Roberto disse...: 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; 26 de setembro de 2009 01:41
Danilo Gomes | reCRIar - design disse...: background-image: Entra como código também?

Por que não tou axando isso lá no HTML do meu blog!; 28 de setembro de 2009 14:57
Fabiano Roberto disse...: Danilo Gomes | reCRIar - design
se não achar essa parte deve colocar, isso faz parte quando for usar uma imagem como fundo.; 28 de setembro de 2009 15:53
tiagosk disse...: MUITO BOM CARA VLW MESMO!!!; 3 de outubro de 2009 14:36
FDS disse...: 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!; 7 de outubro de 2009 22:21
mauricio disse...: 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; 12 de outubro de 2009 00:01
Fabiano Roberto disse...: Mauricio
não dá pra usar duas imagens de fundo no mesmo lugar, o ideal seria já criar a imagem sobreposta; 12 de outubro de 2009 00:13
João Marcos disse...: 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!; 13 de outubro de 2009 12:59
Fabiano Roberto disse...: veja aqui como formatar o texto
http://www.dicasparablogs.com.br/2009/04/como-formatar-o-texto-do-blog.html; 13 de outubro de 2009 15:37
Ana Paula disse...: 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; 16 de outubro de 2009 18:54
Fabiano Roberto disse...: 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; 16 de outubro de 2009 20:04
9+1 Downloads disse...: Muito bom, mas no IE, nao funcionou, só apareceu no F.F.
De qualquer jeito, muito obrigado.; 26 de outubro de 2009 14:50
Fabiano Roberto disse...: 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; 26 de outubro de 2009 15:51
Anônimo disse...: 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; 2 de novembro de 2009 14:52
Fabiano Roberto disse...: para se repetir pela pagina toda pode apagar essas 3 linhas
background-repeat: repeat-x;
background-repeat: repeat-y;
background-attachment: fixed; 2 de novembro de 2009 14:56
Katiusce Cunha disse...: Esta dica de imagem, me ajudou bastante. Ficou certinho!!; 5 de novembro de 2009 11:34
Anônimo disse...: 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.; 7 de novembro de 2009 11:37
lucas disse...: o meu blog o fundo ficou branco ,
oque a de errado; 7 de novembro de 2009 15:13
Fabiano Roberto disse...: 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; 7 de novembro de 2009 17:38
lucas disse...: deu certo,consertei tudo o que faltava, valeu!; 8 de novembro de 2009 18:26
Hawan Sterffersson disse...: oi por favor me ajude como eu posso tirar o nome blogspot do endereço do site?; 15 de novembro de 2009 16:53
Fabiano Roberto disse...: Hawan Sterffersson

veja aqui como registrar um dominio

http://www.dicasparablogs.com.br/2009/08/como-registrar-um-dominio.html; 15 de novembro de 2009 18:08
Anônimo disse...: 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; 18 de novembro de 2009 21:42
Fabiano Roberto disse...: 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; 19 de novembro de 2009 13:23
iq.vendas disse...: 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?; 21 de novembro de 2009 15:21
Fabiano Roberto disse...: o código parece certo, mas não tem espaço nem muda de linha entre url(.....; 21 de novembro de 2009 19:23
Regina Dimow disse...: 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?; 24 de novembro de 2009 09:06
Fabiano Roberto disse...: Regina Dimow, você está falando das letras do titulo deste blog? se for isso não é feito com imagem de fundo é Flash(programa); 24 de novembro de 2009 16:51
Beatriz disse...: 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 ^^; 10 de dezembro de 2009 11:45
Fabiano Roberto disse...: 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; 10 de dezembro de 2009 14:19
Beatriz disse...: 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?; 10 de dezembro de 2009 14:41
Fabiano Roberto disse...: para a imagem de fundo não se repetir coloque isso junto com o código
background-repeat: no-repeat;; 10 de dezembro de 2009 14:54
Lucas C. M. disse...: 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á!; 11 de janeiro de 2010 21:34
Fabiano Roberto disse...: 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; 12 de janeiro de 2010 15:10
Lucas C. M. disse...: 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!; 12 de janeiro de 2010 23:03
Fabiano Roberto disse...: 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; 13 de janeiro de 2010 15:02
Lucas C. M. disse...: 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.; 15 de janeiro de 2010 20:13
Fabiano Roberto disse...: Lucas C. M.

qual o código que está colocando e em qual parte do html?; 15 de janeiro de 2010 22:24
Lucas C. M. disse...: 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;
}; 15 de janeiro de 2010 23:25
Fabiano Roberto disse...: é 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;; 15 de janeiro de 2010 23:54
Lucas C. M. disse...: continua não funcionando; 16 de janeiro de 2010 11:53
Fabiano Roberto disse...: 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; 16 de janeiro de 2010 12:13
Lucas C. M. disse...: 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é)...; 16 de janeiro de 2010 15:05
Fabiano Roberto disse...: 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; 16 de janeiro de 2010 17:54
Anônimo disse...: 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!; 18 de janeiro de 2010 09:53
Fabiano Roberto disse...: 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; 18 de janeiro de 2010 15:34
Josenildo disse...: 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.; 19 de janeiro de 2010 19:14
Júnior disse...: 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/; 20 de janeiro de 2010 08:25
Xhandy disse...: Ó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.; 20 de janeiro de 2010 14:58
Fabiano Roberto disse...: 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; 20 de janeiro de 2010 15:37
Xhandy disse...: 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.; 20 de janeiro de 2010 15:57
Xhandy disse...: 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.; 20 de janeiro de 2010 16:09
Dani Toscano disse...: 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?; 26 de janeiro de 2010 15:22
Fabiano Roberto disse...: 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; 26 de janeiro de 2010 15:36
Rafael Amorim disse...: 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; 26 de janeiro de 2010 16:24
camila disse...: 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.; 26 de janeiro de 2010 16:56
Fabiano Roberto disse...: 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; 26 de janeiro de 2010 17:28
Dani Toscano disse...: 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!; 27 de janeiro de 2010 12:35
Fabiano Roberto disse...: 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; 27 de janeiro de 2010 16:43
Dani Toscano disse...: 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?; 27 de janeiro de 2010 20:21
Fabiano Roberto disse...: 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.; 28 de janeiro de 2010 15:55
euamoscrap disse...: 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!; 5 de fevereiro de 2010 15:21
Fabiano Roberto disse...: euamoscrap

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

background-attachment: fixed;; 5 de fevereiro de 2010 18:09
euamoscrap disse...: 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!; 5 de fevereiro de 2010 19:54
Administrador - Michael disse...: Muito obrigado...
Me ajudou muito...
Esse blog é o máximo; 18 de fevereiro de 2010 17:43
. disse...: Muito bom! Funcionou no meu blog de testes e pretendo colocar no meu blog normal; 28 de fevereiro de 2010 21:03
Clara TMJ disse...: Não consegui colocar a foto! Me ajudaaaa!; 3 de março de 2010 01:02
Alessandro disse...: 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; 6 de março de 2010 09:59
Thiago disse...: 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; 23 de março de 2010 20:52
Jurassik Dark disse...: 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; 15 de abril de 2010 13:24
Fabiano Roberto disse...: 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; 15 de abril de 2010 14:49
Heey Judd disse...: Caraaaaaaaaaamba !
eu conseguiiiiiiiii !
obriiiiiiiigada !; 15 de abril de 2010 21:01
Anônimo disse...: 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.; 24 de abril de 2010 12:28
Fabiano Roberto disse...: 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.; 24 de abril de 2010 15:29
Anônimo disse...: 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; 3 de maio de 2010 14:42
Fabiano Roberto disse...: 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; 3 de maio de 2010 15:34
Caiock disse...: 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?; 9 de maio de 2010 13:59
Fabiano Roberto disse...: acho que não tem como mudar a imagem de fundo automaticamente.; 9 de maio de 2010 14:12
Caiock disse...: 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; 9 de maio de 2010 14:20
Fabiano Roberto disse...: 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.; 9 de maio de 2010 14:41
Caiock disse...: 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 <>...; 9 de maio de 2010 14:49
Fabiano Roberto disse...: está certo o código como colocou aqui, isso é CSS ele não usa os sinais < >; 9 de maio de 2010 14:54
Caiock disse...: 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?; 9 de maio de 2010 14:55
Fabiano Roberto disse...: veja aqui Banner Rotativo; 9 de maio de 2010 20:07
karolinfaction disse...: 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/; 12 de maio de 2010 16:10
Fabiano Roberto disse...: talvez seja problema do seu computador, entrei no blog agora e parece normal
exclua o histórico de internet.; 12 de maio de 2010 16:18
Larissa disse...: Não estou conseguindo colocar a imagem de fundo eu coloco o codigo mas fica tudo igual; 7 de junho de 2010 15:48
Fabiano Roberto disse...: 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?; 7 de junho de 2010 16:20
Principe Encantado disse...: 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; 28 de junho de 2010 18:39
Fabiano Roberto disse...: Principe Encantado
você precisa criar um estilo .post no html do seu blog usando os códigos que mostramos aqui para fixar imagens.; 29 de junho de 2010 15:37
Principe Encantado disse...: 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; 30 de junho de 2010 23:44
Fabiano Roberto disse...: o estilo seria assim:

.post{background-image(endereço da imagem)};; 1 de julho de 2010 15:27
Natália disse...: 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); 1 de julho de 2010 18:35
Fabiano Roberto disse...: natalia, não entendi sua pergunta, qual imagem acompanha os comentários e postagens?; 2 de julho de 2010 13:32
Natália disse...: 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)!!!; 2 de julho de 2010 17:36
Fabiano Roberto disse...: 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;

}; 3 de julho de 2010 14:07
Principe Encantado disse...: Fabiano em que parte coloco o código .post{background-image(endereço da imagem)};
Abraços; 5 de julho de 2010 16:58
Fabiano Roberto disse...: 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; 5 de julho de 2010 17:03
MegaDjLeoDemais disse...: NÃO CONSIGO ACHAR O CÓDIGOOOO AJUDAAA; 7 de julho de 2010 18:06
Fabiano Roberto disse...: 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; 8 de julho de 2010 15:52
Principe Encantado disse...: Obrigado Fabiano funcionou, ajudou bastante.
Abraços forte; 10 de julho de 2010 13:14
A quitandinha disse...: Olá amigo
Estou tentando postar fotos , mas elas estao repetindo, o que pode estar acontecendo de errado; 14 de julho de 2010 18:50
dwerso disse...: 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; 16 de julho de 2010 20:49
dwerso disse...: 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; 16 de julho de 2010 21:08
Fabiano Roberto disse...: dwerso
você precisa apagar essa ultima linha background: $(body.background); isso gera outra cor de fundo; 16 de julho de 2010 21:58
dwerso disse...: 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; 17 de julho de 2010 12:49
Fabiano Roberto disse...: qual o código que está usando para modificar a imagem de fundo? publique aqui o trecho completo do body{...}; 17 de julho de 2010 12:57
dwerso disse...: ----------------------------------------------- */
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...; 17 de julho de 2010 13:11
Fabiano Roberto disse...: 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);; 17 de julho de 2010 13:21

«Mais antigas ‹Antigas 1 – 200 de 203 Recentes› Mais recentes»

Postar um comentário

Guia Rápido

Top Parceiros

Imagem no fundo do blog

CSS

Efeitos

Template

203 comentários:

Contato

Arquivo do blog