Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

30 março 2007

Mudar plano de fundo - background

Para mudar o plano de fundo do template, procure por Body no código CSS e alterar o que está em Background:

body {
background-color: $bgcolor;}

Se você deseja alterar somente a cor, faça como no exemplo: background-color e coloque o código da cor (hexadecimal, como: #ffffff), ficando assim:
body{
background-color: #ffffff;

Se deseja colocar uma imagem:

background: url(url da imagem) repeat;

Dica: para que o navegador Intenet Explore consiga interpretar o código, dê um espaço maior entre o endereço da imagem e repeat, caso contrário não aparecerá no navegador, apesar de aparecer normalmente no Firefox e no Ópera.

A imagem escolhida para o fundo do template não precisa necessariamente se repetir indefinidamente. Você pode querer, por exemplo, que esta imagem seja fixa no topo do template. Veja as maneiras como você pode estipular o comportamento da imagem do background (isto vale para a definição de background de qualquer elemento da página, seja body, main, sidebar, etc)

repeat; repete por todo o elemento
repeat-y; repete na vertical
repeat-x; repete na horizontal
no-repeat; não repete

quando for estipulado que a imagem não deve se repetir é necessário informar em que posição ela deverá aparecer:

background: url(url da imagem) no-repeat top left; -> não repete e se apresenta no topo à esquerda.

Para que a imagem fique fixa na tela:
background-attachment: fixed;

Para que a imagem role com a tela:
background-attachment: scroll;


Texto alterado em set/2008

Artigos Relacionados

141 comentários:

Unknown disse...

Oi.
Eu tenho um blog, totalmente modificado.
Peguei um modelo e fui fazendo alterações nele até chegar onde eu queria.
Hoje, meu codigo html é uma bagunça e eu nem sei mais pra onde que ele vai.
Nunca consegui colocar os comentários do proprio blogger nele, então eu anexei um sistema de comentarios hospedado por outro site.
So que depois que o google tomou conta, eu não consigo mais por comentários de maneira nenhuma... alguma luz pra me dar?
Obrigada.

Tom disse...

eu queria saber se tem como vc me ajudar eu tenho um blogger e queria colocar uma imagen de fundo mas não consigo de geito nehum eu tenho a imagen hospedade em um site mas não consigo fazer aiesta meu msn me add e me ajude a fazer isso obrigado msn: wevertoncrg@hotmail.com

Filipa disse...

Olá desde Portugal! Parabéns pelo sue trabalho! Adorei, inclusive fiz o download do template do grupo 02 aquele das borboletas, mas agora surgiu um probleminha, como volto a colocar o titulo no meu blog? Ja tentei mudar no html a cor mas ao invés de aparecer o titulo, o fundo muda de cor! Fico aguardando sua ajuda. Obrigada! :)

Anônimo disse...

Valeu as dicas, mas não deui certo aqui no meu blogger!

Icaro disse...

Ariane, peço desculpas por te encomodar novamente; é que mudei o template do meu blog para o rounders 3, e mudei o backgrond do mesmo, peço que você dê uma olhada no meu blog: icarorodolfo.blogspot.com porque gostaria de mudar a cor ao redor do cabeçalho para a mesma do plano de fundo e mudar a cor também do plano de fundo da barra lateral de cima (onde fica meu perfil, arquivos, links e etc.) também para cor do plano de fundo, e o rodapé também.
Resumindo gostaria de deixar o blog todo da mesma cor do plano de fundo, menos a cor principal do plano de fundo (onde fica as postagens)

Ah, quanto a figura nos links, não conseguir, você me passou o seguinte código:
"< a href= "endereço do link">< img src="endereço da imagem">< /a>

mas, sem os espaços que eu coloquei para q o codigo aparecesse aqui, ok?"

Coloquei do jeito que você mandou sem o espaço e tudo mais...mas não deu certo, fui em modelo; elemento da página; sites e lá pos o código, juntamente com os links e não deu certo, foi eu quem errei ou o código que está errado?

Meu blog é: icarorodolfo.blogspot.com

Abraços;

Anônimo disse...

Ola, eu tenho um blog no blogspot.com, porem nao consigo mudar o modelo dele.
Ja fiz varias modificacoes e ele nao aceita os codigo, ja tentei no frontpage, no dremweaver, no flash, e no framework.
Sera que alguem pode me ajudar..por favor!!!
Obrigada
:c)

Anônimo disse...

Ola, tentei modificar o meu modelo (template) porem nao da certo.
Ja tentei em varios formatos e com diversos programas.
Podem me ajudar?

meu blog é
http://cwbdownloads.blogspot.com/

Ariane disse...

Ka, todas as modificações que faço são direto no template. Não uso nenhum programa para modificar os modelos.

Pat Faz Arte disse...

Olá Ariane, estou precisando de uma ajuda sua....
Gostaria de saber como é possível colocar um novo fundo no meu blog (acho que é chamado de background), pois andei visitando o Planet Gifs e ví cada um mais lindo do que o outro, mas não tenho a menor idéia de como fazer para colocar um daqueles "papéis de parede" no meu blog.
Espero poder contar com seu auxílio, ok?
Brigadão desde ja !!!
www.patfazarte.blogspot.com
e-mail:pat.faz.arte@hotmail.com

Ariane disse...

Pat, salva a imagem no seu computador, hospeda ela em algum site (ImageShack, Photobucket, etc) e coloca o endereço da imagem como eu explico aqui no post, ok?

elite disse...

Oi Ariane me desculp te encomodar , mais ñ consigo de geito nenhum por uma imagem no fundo do meu blog me ja tentei modificar o Background mas ñ resultou em nada, vc pod me da uma luz, obrigado.
castelovip.blogspot.com
nikoelite@hotmail.com

elite disse...

Oe Ariane, tenho outro problema agora eu baixei um teplates e na hora de salvar no meu blog aparec uma mensagem q diz q tem + d um id html e ñ sei oq fazer se vc poder me dar uma luz agradeceria muito...

Relógio Desregulado disse...

Obrigado por mais essa dica Ariane, vc realmente é um anjo!

Gooxe.

Kaka disse...

Olá, mudei o plano de fundo de meu blog conforme indicado neste post. Depois inseri o seguinte código nas colunas para destacá-las mantendo uma certa transparência.

background-color: #000000;
filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -khtml-opacity:0.90;

O problema é que as imagens que posto também estão ficando transparentes. Como poderia resolver isso?

Manchester Maceió disse...

eu tenho a mesma duvida da pessoa que postou isso
Esta é a Tag a que vc se refere?

body {
background-color: #ccc;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}

onde e como coloco a URL aí dentro?

se puder ajudar tbm
abraço

marcelo aranha disse...

a mesma duvida dos 2 posts acima tbm tenho

Juninho disse...

Olá é que eu tenho um blog e ele é o i3 theme mais to vendo em blogs o buscar fica centralizado no topo do blog queria saber se tem como vc ensinar ai como faz pra deixar ele no centro do topo

Yale disse...

cara estou com uma grande dificuldade de colocar um plano de fundo no blogger vc pode me ensinar detalhado pelo e mail agradeçoser ser main-wrapper e sidebar-wrapper

Silvinha disse...

Ola!

Por favor, eu gostaria de saber como colocar uma imagem especifica na lateral do blog, como os ramos, galhos e flores (?!) que estão na parte superior deste blog mesmo!

Obrigada!

Futebol Ao Vivo : disse...

Muito obrigado aqui deu certinho. vlw msm.

Eduardo Mendes disse...

Olá Ariane você é d+,e foi muito bom você ter desabafado daquele jeito!
Eu vejo seu blog todos os dias tenho um bem modificado graças a você!!!
Eu não te adoro eu "TE AMO"
=D

°º°ºЭx¡ß¡đ¡ñήä°º°ºM@rci@ Regin@ disse...

ola
Parabéns pela sua boa vontade em esclarecer aos menos esclarecidos
Mas mesmo seguindo suas dicas plano de fundo de meu blog não fica correto:ou fica só o plano (desaparece o blog) ou o plano de fundo se transforma numa imagem (gif) lateral esquerda....
M@rci@ Regin@

°º°ºЭx¡ß¡đ¡ñήä°º°ºM@rci@ Regin@ disse...

ola Ariane

Parabéns pela sua boa vontade em esclarecer as dificuldades aos menos esclarecidos.

Mesmo seguindo suas intruções: ou fica só plano de fundo(some o blog) ou fica uma imagem(o plano de fundo) à esquerda com o restante do blog normal.
sabe onde errei?
mareg2006@gmail.com

Anônimo disse...

Oi,
Bom eu queria mudar o modelo do meu blog certu?
Eu fiz tdo aquilo que vc falou e naum consegui,da que naum foi possivel salvar o modelo..
Se vc poder me ajudar

Bird disse...

Estou há séculos tentando fixar um modelo para meu blog,mas não consigo deixá-lo com a minha cara. não sei mexer naqueles códigos, quero mudar o plano de fundo,mas parece que não consegui só com as dicas que deu.pode me ajudar?sabe de um site que ensine essas coisas para quem não sabe nada?

Mayara Nunes disse...

mto bom o blog, parabens

Dea Carvalho disse...

Mesmo problema do Kaka... tudo na coluna absorve a transparência, imagem, texto... queria que só a cor da coluna tivesse um pouco de alfa, sem alterr as imagens e textos...

Lucas disse...

Eu mudei a cor do meu blog, mas houve um problema: as colunas do blog ficaram com "pedaços" pretos nos cantos e não consigo tirá-los. Por favor,respondam o mais rápido possível.

Blog das Dicas disse...

Valeu pela dica!
Deu certo!

Mana Costa disse...

Olá.
To soh de passag, e qria t comunik q seu blog m ajudou bastante, tinha centenas d duvidas e vc tirou todas elas.
Valew aew!!!
Continui sempre assim esse seu blog eh dez!
Bjos e se cuida!

Ah, e m esquecendo,
BIGADA!

Fuiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

Samuel dos Santos disse...

Olá pessoal estive vendo vcs pedindo ajuda para a Ariane, eu consegui fazer do jeitinho que ela disse e ao invés de uma imagem, coloquei um banner animado...entrem e confiram
www.samueldossantos.blogspot.com
Bom sobre esse código é o seguinte...
voçes vão procurar pela tecla (ctrl+f) o codigo <body>
logo apos de body existe este código
<body>
<link href='http://img115.imageshack.us/img115/7272/movie89dr3.png' rel='shortcut icon' type='image/ico'/>
<div id='outer-wrapper'>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='รค๓ยєl (Cabeçalho)' type='Header'/>
</b:section>
</div>
percebem que existem um link de uma imagem, é ali onde vcs vão colocar o link da sua imagem ok...
mas importate saber que vcs preçisam fazer uma imagem do tamanho certo ali ok...procure em css ou logo abaixo desse código q estara lá
SAMUEL DOS SANTOS

Nino disse...

ola como vai ...?bem eu queria que vc me dissese como eu coloko a data no templante :itheme-techno-2c-right-blogger...aquele calendariozinho que fica em cima do poste ...aparece sempre undefined...como eu fasso?

Jéssica disse...

Olá! To começando agora nesse mundo de blog, portanto não entendo quase nada!!!
Quero mudar o plano de fundo od meu blog e colocar uma imagem. Essa imagem precisa estar postada em algum lugar, não é? Como eu faço para postá-la? A media do Blogger é a mesma dos templates normais (800x600 pxl)?

Se puderem me ajudar agradeço um mooooonte!!!

Ariane disse...

Jéssica, vc tem que hospedar a imagem em sites como ImageShack, Photbuckhet ou TinyPic (recomendo), depois copia o link oferecido, que é o link onde a imagem está hospedada. Então siga o tutorial e coloque o link onde está url da imagem

Ariane disse...

Nino, desculpe mas não conheço este template

Na Trilha do Trem disse...

olá,eu consegui colocar o plano de fundo e tal,mais eu queira colocar uma imagem só nesse plano de fundo,mais qunado eu coloco repeat; ela aparece eu um canto da tela,e a imagem é bem grande 1600/1200,e queria saber coomo posso fazer

abrigado

Jaqueline Zaia disse...

Eu tenho um problema. Não consigo postar gifs animadas, não sei o que há de errado. As imagens ficam paradas...
Por favor, me ajude se possível!

Anônimo disse...

Oi...

tenho uma duvida...

body {
background-color: #ccc;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}

onde eu coloco o URL?

ja tentei de varias formas.. e nao muda nada.. =/

alguem pode me ajudar?

ja agradeço...^^

Ariane disse...

Clenice, como está no texto: subtitua o background-color por background: url(url da imagem) repeat;

Beijaflor disse...

Não consigo modificar o meu modelo no bloger do google.Porque não tenho imgens em html. Sabem de algum saite que tenha fundos em html.

ritinha . disse...

queria titrar o meu cabeçalho do blogger do google e por uma foto ou imagem.preciso que me ajudem.

RADIO WEB ENERGIA disse...

ola sou novata e gostaria de saber como eu aplico um templades que salvei de um site no meu blog.
agradeceria se ajudacem obrigada

Unknown disse...

Olá Ariane,

Tenho um template feito por si no meu blogue, entretanto nestes últimos dias alguma coisa se passa com ele pois a imagem não está lá.
Penso que poderá ter a ver com a hospedagem da imagem.

Agradecia-lhe se pudesse que desse uma vista de olhos.

Obrigado,

Zé Pedro

http://epacumcatano.blogspot.com/

Ariane disse...

Zé, as imagens não estavam junto com o código do template, qdo vc fez o download? Pq eu não tenho mais este template comigo, infelizmente....

Shiryu de Dragão disse...

oie não to conseguindo usar o comando background-attachment: fixed;
obrigado!

Anônimo disse...

como mudo meu blog

Lisandro disse...

Olá Ariane, antes de mais nada obrigado pela atenção com os novatos e parabéns pela iniciativa do Blog. Se puder me ajudar ficarei muito feliz.

Seguinte, eu fiz um fundo no photoshop e inseri no código, tá tudo certo, mas a imagem não completa o tamanho da tela na largura e se repete (ou não, depende do que eu quiser). Tem alguma forma de padronizar a largura pra que todas as resoluções de vídeo possam ver sem problemas? Já mudei a largura da imagem pra absurdos 10.000 px pra testar e continua cortando do lado direito.. não sei mais o que fazer.. ;/ Se puder me dar uma luz ficarei muito grato..

meu e-mail, lisandrocf@gmail.com

Desde já agradeço a atenção!

Abraço

Anônimo disse...

queria mudar o fundo do meu blog para um tema particular, como faço?

Help Mussel disse...

Oi,

Parabéns p/ disponibilidade do seu blog.
Não tô conseguindo usar background imagem, o fundo fica branco. Vê se tem algo errado na alteração q fiz?


body {
background:url (http://farm4.static.flickr.com/3031/2990501630_b2e55fe8cc.jpg?v=0) repeat;
margin:0;

Ariane disse...

Help Mussel, tenta retirando esse finaldo link da imagem : ?v=0

Mammy disse...

OI Ariane,
Alterei a imagem confome tutorial, porém o fundo fica branco.

body {
margin:0;
font:$bodyfont;
background:url(http://img220.imageshack.us/img220/2661/rigqpyvc7.jpg) repeat;
color:$textcolor;
}
Poderia me ajudar?
Obrigadinha!

Ariane disse...

Theo, só este trecho não basta para q eu possa ajudar, eu preciso ver o blog.

Nanny Nascimento - A Sonhadora disse...

Oi, Ariane!

Sabe me dizer como faço para expandir a imagem? Gostaria de estender meu background e não repetí-lo.

Obrigada,
Elaine

Ariane disse...

Sonhadora, só da para aumentar uma imagem num editor de imagem, não com CSS.

Mammy disse...

Valeu por responder. Impressionante como ainda existem pessoas prestativas... parabéns!
O blog é theogno.blogspot.com se precisar de mais alguma informação me fala.
Obrigadinha, Mãe do theo

Mammy disse...

Ariane, acho q descobri pq o fundo fica branco. Eu fiz a alteração no computador de casa e qd abri no computador do trabalho não visualizei acho que pq o site onde hospedei a imagem, lá é bloqueado. Será isso? Obrigada pela atenção!

Ariane disse...

Theo, talvez seja. eu aqui vi tudo certinho, tanto no Firefox, qto no IE. abraços

Alisson Valmiro disse...

qual o tamanho idelapara a imagem ficar só em um lugar na tela inteira,pois a minha só fica no canto e o restante branco quando coloco no-repeat gostaria de colocar ela no fundo inteiro mais sem reptetir

Jessica disse...

Olá Ariane!
Desculpe encomodar, mas não consigo fazer com que a imagem fique fixa na tela. Eu sempre fiz como você ensinou (quando se repete), mas essa é a primeira vez que eu quero deixar fixa, mas fica tudo branco e a imagem não aparece. O url da imagem é http://i299.photobucket.com/albums/mm285/mionezinha_album/eu.gif . Quando coloco para se repetir ela aparece. O que eu posso estar fazendo de errado?
O blog que eu estou tentando mudar é http://jessica-leite.blogspot.com/

Meu email é granger.or.hermione@gmail.com.
DEsde já agradeço.

Ariane disse...

Jessica, pelo q vi vc ja conseguiu. abraços

Ariane disse...

Alisson, a imagem deve ter pelo menos 1024 X 728

Euphoria disse...

Boas, sei algumas coisas de htlm, mas o meu blog da-me cabo da cabeça já tentei mais do que uma vez mudar o imagem de fundo e volto a estaca zero.

Trata-se de um blog de fotografia,( http://cafeadois.blogspot.com) e gostava de colocar esta imagem de fundo:

http://quequeufalo.files.wordpress.com/2008/06/mosaico-11.jpg

bem como outras coisas que vou fazendo com o passar do tempo o problema é nao conseguir de qualquer jeito.

Se me pudesse ajudar agradecia

Ariane disse...

Euphoria, me dá mais detalhes: pq não consegue? o que acontece e como tenta?

Euphoria disse...

Ariane desde já obrigado pela sua resposta,
a minha ideia era fazer do blog uma pagina mais limpa , menos colunas algo muito simples como uma folha branca apenas para expor fotografias e pequenos textos,
o erro de que falo é que nao assume a imagem, eu coloco exactamente como ensina no post e nao assume no blog.
neste momento estou a usar um template que vai de acordo com o titulo do meu blog , mas é de outra pessoas o meu ideal era fazer eu o template mas pelos vistos tenho muito que ler.

Center Downloads disse...

ai so iniciante nessa cois de blog por isso nao sei colocar outro pano de fundo do meu blog...o blog eu peguei aqui mesmo eo Template Digg do Wordpress para o blogger..
me ajude por favor...

Escreva aqui mesmo ou no meu orkurt:
http://www.orkut.com.br/Main#Profile.aspx?uid=3892664511875143283&rl=t

abraços...

Ilha Quadrada disse...

Olá.. ai consigo alterar .. mas não consigo salvar as alterações como faço??

Ariane disse...

ilha, pq não consegue? q mensagem aparece?

Mr.Works disse...

Eu mudei a cor do meu blog, mas houve um problema: as colunas do blog ficaram com "pedaços" pretos nos cantos e não consigo tirá-los. Por favor,responda o mais rápido possível.

A url do blog é essa: http://habbo-zine.blogspot.com/

..:AηɖεƦsoη™:.. disse...

MUITO BOM!

Lucy Heart disse...

Eu queria saber como faz pra por uma imagem de fundo + a repetição do final dessa imagem.
entende o que eu quero dizer?
seria o layout e eu quero que eleseja "infinito", repetindo a última linha...
Obrigada

JohN disse...

Olá,

Eu consegui colocar uma imagem repetidamente de fundo.. Até ai te agradeço muito pelo tutorial, mas eu também gostaria de saber se da pra colocar mais de 1 imagem de fundo, pois gostaria de jogar algumas imagens avulsas por cima dessa que eu coloquei de fundo.

Obrigado

Ariane disse...

John, dá pra colocar uma em body, outra em outer-wrapper e nas outras div's, em posições diferentes, para dar este efeito.

Jack disse...

Valew parceiro foi de grande ajuda esta dica ,muito obrigado!!!

Dry disse...

ola.. estou desesperada!
nao consigo mudar o fundo do meu blog
minha cabeca ta doendeo demais (rsrsr)
preciso de ajuda... por favorrrrrrr

nao entendo nada de blog.. sou novata e isso esta muito confuso p mim...

me ajude por favor.. meu blog eh do blogspot

aguardo retorno...

obrigada

Dry disse...

boa tarde

preciso muito de sua ajuda...
nao consigo de jeito nenhum mudar o fundo

sou novata e isso esta sendo muito confuso p mim...

por favor me ajude

Bruno disse...

Eu queria saber como mudar o fundo das postagens do blog, obrigado

Teatro Teleco disse...

Oiii...ja fiz tudinhu..exatamente como vc expilica mas o fundo fica todo branco...e não coma imagem...
Não sei mais o que eu faço....
Me ajude..
Brigado

Marcia Bispo disse...

Fiz tudo como manda o figurino e ficou em branco. É uma imagem gif, será que interfere
em alguma coisa?

Ariane disse...

Marcia, a imagem em formato gif não interfere em nada, é até melhor por ser bem leve. Provavelmente vc colocou o código com algum erro - qualquer detalhe em falta faz com q a imagem não apareça.

Anônimo disse...

Oi.Tudo Bem?desculpe pelo incômodo.mas,é porque eu tenho um blog do vasco.e gostaria de colocar um plano de fundo do vasco no meu blog.ja tentei fazer inúmeras vezes.mas,não obtive sucesso.porém,venho aqui pedir uma ajuda para a manutençao do meu blog.

Meu Blog é vascainocrvg.blogspot.com

Faustino disse...

segui os comandos que vocês ensinaram, mas o máximo que consegui foi deixar uma imagem centralizada e fixa no fundo de tela. Fica a imagem no centro, mas cercada por tipo uma "moldura" branca. Alterei o tamanho da imagem, mas mesmo assim não adianta..

Não há a possibilidade de eu deixar a imagem fixa, centralizada, e como full screen (tela cheia)?

Willians disse...

Boa Dica;Parabens

AeL disse...

Obrigado Ariane, estou aprendendo modificar meu template todo por aqui !

Cre-Art Presentes Personalizados disse...

Finalmente consegui colocar um fundo no meu blog..demorei qse dia todo.. ainda falta muita coisa

http://creart-placas.blogspot.com/
vou continuar pesquisando para encrementar mais.
Obrigada

Fabi Oliveira disse...

Oi,
Desculpa mas não consigo fazer que funciona suas dicas no meu blogger. Fica exatamente igual que antes.
Você podería explicar detalhadamente quais são os possíveis erros que acontecem para que não surta efeito as modificações feitas?
Obrigada

Ariane disse...

Fabi, todas as dicas aqui foram testadas antes e deram certo. No seu caso, vc colocou um link inválido, ou seja, da página onde está a imagem e não da imagem. Vc tem que clicar com o botão direito sobre a imagem e copiar o endereço dela. Usando um programa que permite uma edição virtual de qualquer página, coloquei o link correto e consegui, veja aqui.
copie sempre o endereço da imagem que sairá tudo certo. abraços!

Bruno disse...

oi ariane... usei esse tutorial e consegui mudar o background do meu blog, porem só funciona quando a janela da interet está maximizada, quando eu aperto o botão "restaurar" a imagem que eu usei "anda" para a direita e fica sob o texto dificultando a leitura... sabe resolver esse problema?

o blog: leidesmurfs.blogspot.com

mto bom o seu blog ^^
abraço

Ariane disse...

Bruno, em body deixe margin: 0 auto 0; que centraliza.

Bruno disse...

Ariane fiz o que vc falou mas não deu mto certo... não sei se eu consegui explicar direito o problema... entra no blog (www.leidesmurfs.blogspot.com)e aperta o botão a esquerda do "x" vermelho no canto superior direito...

talvez eu não tenha colocado o margin 0 auto 0; no lugar certo. é aqui?:

body {
background: url(url-da-imagem) repeat-y;
margin: 0 auto 0;

desde já, obrigado pela ajuda! ^^

Ariane disse...

Bruno, peço desculpas, passei a informação pela metade...o formato deve ser assim:

background: url() repeat-y top center;

Bruno disse...

agora deu certo... brigadão XD

Thaiane disse...

Ariane, teu blog salva a vida do meu... rsrs
muito obrigada!

blogixo disse...

nao sei se isso ja foi falado aqui, mas eu tb estava tendo problemas pra ver o background, ficava branco, ai vi no codigo html q as aspas q eu tinha colado nao eram as aspas normais e o html convertia para um codigo de caracter. entao so troquei por " digitadas no meu teclado e deu certo :)

meu blog:
blogixo.blogspot.com

Danyela Thompson disse...

Nossa gostaria de te agradecer! deu certinho!

Anônimo disse...

Por favor me ajude.
Eu coloquei uma figura no fundo do meu template, ok!
Mas o topo da imagem ficou coberto, pelo cabeçalho e pela coluna de postagem. ok!
Daí eu retirei o cabeçalho, só que a coluna de postagem subiu, ficando no local do cabeçalho.
Continuando assim, sem ver o topo da imagem de fundo (que no caso eu usaria como novo cabeçalho)
Vc poderia me ajudar? me dizendo como dar um espaço entre o topo da pagina e a coluna de postagem e de perfil?
obrigadíssima

Ariane disse...

frescurasvm, poe o cabeçalho de volta. ai coloca em header-wrapper assim:
background:transparent;

Anônimo disse...

obrigada, demais

Anônimo disse...

Ariane olha eu de novo, me diz uma coisa,
é possível eu mudar o plano de fundo e colocar:
no-repeat na imagem e logo abaixo, quando a imagem acabar,eu por outra diferente?
Tipo, uma no topo e quando acabara do topo, colocar outra apartir de onde essa terminou.
Digo isso, pq eu coloquei repeat na minha sabe, ai a parte do topo ficou repetindo ao longo do blog.
Beijos e muuuuuuito obrigada.

Vívia
http://frescurasvm.blogspot.com

Anônimo disse...

Ariane help me pleeease...tu viu meu comentário?
responde só se sim ou não. obrigada mais uma vez..;)

Ariane disse...

frescurasvm, não é possível colocar dois backgrounds em um elemento. Vc tem que colocar um em body, por exemplo, e outro em outer-wrapper.

Rodrigo Pamponet disse...

Olá! Sou novo na costrução de blogs e numa pesquisa, encontrei esse tutorial. No meu caso, coloquei como plano de fundo a cor preta. posteriormente, coloquei uma imagem como background. Porém, essa imagem é pequena e só se extende pelo cabeçalho. Agora quando a imagem termina, o fundo fica todo branco. pq isso acontece? Como posso colocar a imagem no topo do meu blog e manter o fundo na cor preta por toda a extensão?

Desde já, agradeço

Rodrigo Pamponet disse...

Olá! quando fiz meu blog, coloquei o fundo preto. porém, coloquei uma imagem como fundo, só que essa imagem não abrange todo o espaço do layout. Agora aparece a imagem, mas qdo a imagem acaba, o fundo fica branco. como mantenho a imagem e o fundo preto?
Desde já agradeço

Ariane disse...

Rodrigo, no seu blog está assim:
background:url(http://img387.imageshack.us/img387/8203/designu.jpg)
no-repeat;

deixe assim:

background:#000 url(http://img387.imageshack.us/img387/8203/designu.jpg)
no-repeat;

e o fundo será todo preto. Você pode aproveitar e alinhar o layout (está todo para a esquerda em um monitor maior). Procure por:

#outer-wrapper {
width: 750px;
margin:20 auto;
padding:10px;
text-align:left;

substitua margin por:

margin: 0 auto;

Leonardo Caldieraro disse...

Olá Ariane, tudo bem?

primeiro, parabéns pelo seu blog que de muito serviu para eu (e tantos outros) conseguir dar uma ajeitadinha no meu blog... =)

há um tempo já que venho tentando fazer uma coisa no blog, tipo o que tem no boteco sujo (http://www.botecosujo.net/), mas não consigo de jeito nenhum... vc pode me dar uma ajuda?

desde já, obrigado

Ariane disse...

Leo, o que tem neste blog que vc gostaria de fazer?

Leonardo Caldieraro disse...

o fundo colorido com a parte branca e a escrita... pq se deixar colorido tudo, fica poluído demais...

obrigadão :)

Ariane disse...

Leo, é só determinar uma cor para o background de body, por exemplo, cinza. Aí vc vai em mani-wrapper e coloca uma background branco e na sidebar idem, assim:

#main-wrapper{
background: #fff;
.......}

#sidebar-wrapper{
background: #fff;
.......}

Leonardo Caldieraro disse...

Muuiito obrigado!

parabéns pela competência e por estar sempre ajudando quem precisa ^^


só tenho mais uma pergunta...
tem como deixar as bordas arredondadas?

obrigado, de novo.
abração

Leonardo Caldieraro disse...

Esqueça, é o template dele que é diferente... que burro eu sou, não ter ido olhar no template antes de vir te encher o saco...

valeu pela atenção :)

LuGui ;D disse...

no meu não deu, olha o blog http://parada-geografica.blogspot.com/

----------------------------------------------- */

#navbar {visibility:hidden;display: none; height:0px;}

html {
background: #E2DDCB;
}

body {
background:url(http://www.winsupersite.com/images/reviews/lh4051_hillel_desktop.jpg) no repeat;
width: 1024px;
height: 768px;
color: #333333;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 10px auto 10px;
padding: 0px;
}


ta do mesmo jeito que tava antes

Rodrigo Pamponet disse...

Olá Ariane,

Obrigado pela orientação, funcionou, o blog está todo preto. Só que surgiu um probleminha também. O texto do blog também ficou preto e não dá pra ler nada. Já fui na sessão pra mudar a cor do texto, selecionei o branco, mas nada mudou. Continua tudo preto. Se puder me ajudar agradeço.
Abraço

Ariane disse...

Rodrigo, estranho vc não conseguir mudar...de qualquer maneira, procure por .post{ e coloque lá este código, pra ver se resolve:
.post{
color: $textcolor;
provavelmente conseguirá mudar no painel Fontes e Cores depois disso. Abraços!

brad disse...

PERFEITO,TROQUEI O CÓDITO DO HTML PELO QUE EU QUERIA E MEU PLANO DE FUNTO TA O MAXIMO...VALEU!!!

Sing to me the song of the stars disse...

oie
eu coloquei o fundo tudo certinho amis ele ficou assim:
www.singtomethesongofthestars.blogspot.com
mais eu queria que ficasse tipo assim:
http://mycherrymoon.blogspot.com/
eu quero com o meu fundo, amis eu não quero q o fundo fique aparecendo onde tem a postagem e seguidores, etc.
eu queria que aquela parte ficasse branca entende ?
obrigada

..não crio juízo porque não sei o q ele come... disse...

Pôxa, amiga...como eu faço pra mudar o fundo do meu blog do blogger?
'( buááá
Se possível, eu gostaria q vc colocase um tutorial, como você fez em "Menu Horizontal"..vc salvou a imaghem e postou como se faz...onde colar o código...aí, eu conseguío tranquilo...
Mas, não estou conseguindo mudar o fundo...
Por favorzinho, mana!!!
Meu email:rosaalberti@ig.com.br

Valeu!

Cleisson disse...

Ariane você sabe se tem um jeito de colocar uma imagem de fundo so nas postagens?

Rebeca disse...

Ariane, não tô conseguindo mudar a cor do meu blogspot :/. Olha:

*/

body {#ff808b
background-color: #ffffff
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color: #333;
font-size/* */:/**/small;
font-size: /**/small;
}

é aqui que coloca né?
eu queria colocar como laranja o plano de fundo do meu blogger :/, mas nem conseguii.
me ajuuuda Arii, por favor :)

bjooos =**

Nani Catarino ♥ disse...

Vc poderia me mandar um convite para ler o seu blog? grata, Nani

Ariane disse...

Beca o correto é assim:

body {
background-color: #ffffff (aqui o valor da cor de fundo)
margin:0;

Ariane disse...

Cleisson coloque o background em .post

by Polly disse...

Oi Ariane, seu blog é ótimo... obrigada!

Gostaria de saber como eu faço pra colocar um fundo gradiente em blog..
tipo..coloquei o layout na parte de cima..e deu td ok..


o q eu quero é q em vez de mudar a cor do plano de fundo através das configurações do blog, colocar uma Cor Gradiente... entende?

mais detalhes:
eu fiz no photoshop e hospedei no ImageShack...mas aonde e como eu ponho no HTML?
-------------------------
EX:


background-color: #ffffff (aqui o valor da cor de fundo)


aqui,em vez de "#ffffff" eu queria colocar um cor gradiente q EU fiz no photoshop...


;)

Cacá Hewson Smith disse...

Valeu o esforço, mas a explicação está muito confusa. Deveria ser mais detalhista, afinal quem ñ sabe pôr um fundo do blog (como é o meu caso), não vai saber o que é código css.

Lord'leone disse...

Oii, adorei suas dicas, estou criando um novo blog e elas estão me ajudando muito, mas, eu gostaria de saber como faço para alterar a fonte, eu baixei a quelas fontes dos sites que você postou, mas não estou consiguindo postar, conto com sua ajuda!

Desde já, Obrigado!!

Anônimo disse...

Brigadão mesmo! não só por esse tuto, mas por todas as outras coisa no seu blog.Se não fosse pela sua ajuda meu blog seria muito monótono, assim como de muitas outras pessoas.VALEW!!!

Maxim Stratan disse...

oi pessoal! eu que não é um lugar certo para meter dúvidas, mas eu n consigo encotrar a resposta em lugar algum, é o seguinte: Como faço para que em cada página apareça somente 10 mensagens e depois no fim ter uma seta que mostre mais 10 mensagens e depois outra... eu queria isso para que quando um leitor carregasse num marcador não tivesse na sua frente uma página sem fim. alguem me pode ajudar?

Ariane disse...

by Polly, se vc criou uma imagem gradiente no Photoshop, deve hospedá-la e incluir como imagem:
background: url(link da imagem) repeat-x top left;

Lord'leone, quando vc usa uma fonte em uma página, esta fonte precisa ser visível para todos os leitores e isto só é possível se todos os leitores tiverem esta mesma fonte em seus computadores. Por exemplo, se eu não tenho no meu computador a 'Comic Sans' e você escrever todo seu texto com essa fonte, eu não verei a 'Comic Sans' mas uma fonte outra fonte determinada em substituição ao que vc usou, entende? Por isso só as fontes que são comuns à todos devem ser usadas de prefência, como Arial, Trebuchet, Verdana...As fontes diferentes são mais usadas em imagens, por que assim são vistas por todos.

FXC eu é que agradeço muito seu comentário! :)

Maxy é preciso ir no código do template, clicar em Expandir Modelo de Widget e substituir todos os trechos data:label.url por data:label.url + "?max-results=5"
O número 5 se refere ao número de posts que deve ser mostrado, vc poderá alterá-lo ao seu gosto.

Maxim Stratan disse...

obrigado ariane!! resultou.

Unknown disse...

Olá!... Queria agradecer a dica, funfou direitinho :D

--|Murilo_MetallicA|-- disse...

...mas Ariane... como posso coloca meu backgroud conforme a configuração de video da tela da pessoa? por que no meu caso eh 1440x900 (19') ...e ai tem pessoas que usam mais, ou menos... e ai a imagem fica em tamanhos diferentes...

se você manda uma solução por aqui! fico agradecido.

Arian Motta disse...

Olá Ariane...temos os nomes bem parecidos!!!

Mas então, eu gostaria de colocar uma imagem como background no meu blogger ( www.trianguloquadrado.blogspot.com), mas esta não está na internet. Ou seja, a URL dela não existe. Gostaria de saber como coloco esta imagem sem ter URL como background, e se não tiver como assim fazer, e só ela estando na internet ( ou seja, com URL ), me explique aonde eu posso coloca-la. Seria em um banco de imagens na internet??? Obrigado desde já.

OBS:SE PREFERIR, ENTRE EM CONTATO COMIGO POR E-MAIL: arian.moises@ibest.com.br


ATÉ MAIS!!!!!!!

Danny disse...

Olá, parabéns muio legal suas dicas, acompanho sempre e tem me ajudado muito.
Tenho um blog do blogger, e recentemente coloquei dominio próprio e fiz algumas modificações no template, coloquei uma imagem fixa de fundo no background e coloquei as colunas de postagens transparente, no IE aparece sem problema, ja no firefox o fundo aparece todo branco... será se poderias me ajudar??
se quiseres dar uma olhada é: desejoaflordapele.com

Ariane disse...

Murilo não vejo uma solução para isso por enquanto.

Arian não tem como, você tem que hospedar a imagem na internet.

Monalisa, o link que vc indicou não funcionou.

Felipe Guasti disse...
Este comentário foi removido pelo autor.
Juniedson Macedo disse...

Gostaria de modificar alguma s coisas ou acrescentar em meu blog como animação outos modelelos de fundo,colocar novas colunas de três poe exemplo já pesquisei, acrescentei codigos mas naõ consequi me ajudem...

Sabrina Beatriz disse...

Amei, entendo um pouco da linguagem html e estou conseguindo modificar meu blog
Brigadão!!

lucy disse...

obrigado pelas suas dicas pois a muito tempo queria mufdar a cor do meu blog com um plano de fundo e nao tina conseguindo com suas dicas conseguir muito obrigado que Deus continue te dando cada dia mas sabedoria fica com DEUS!!

Anônimo disse...

muito obrigado,eu cusitei para fazer mas conseguir muito obrigado,do fundo do meu coraçao....fique com DEUS!!!!

Kk Peixoto disse...

Olá Ariane!

Estou quebrando a cabeça por um problema. Tenho o seguinte blog: http://asteriscu.blogspot.com/.

Minha intenção é manter o fundo preto e inserir uma pequena imagem fixa no canto inferior direito.

Já hospedei a imagem, já coloquei "url(imagem hospedada)no-repeat buttom fixed", mas não consigo inserir a imagem ao mesmo tempo que mantenho o fundo preto.

O que faço?

Obrigada!

CONHECIMENTO disse...

eu queria saber se tem como vc me ajudar eu tenho um blogger e queria trocar o tema dele para ficar mais legal mas não sei como, meu e-mail me add e me ajude a fazer isso obrigado.
e-mail:wellington.real01@gmail.com
e o meu blog:hist-nazismo.blogspot.com

Carol Burgo disse...

Oi Ariane!

tentei mudar o background do meu blog e simplesmente não consegui mudar com nenhuma das dicas que voce deu. atualmente meu background ta assim:

body {
background:url(http://2.bp.blogspot.com/_80IXn2CQAEo/Spvp0C2QYXI/AAAAAAAAAXc/-MJyjH_Z5Ko/s1600-h/FUNDO_BLOG.jpg) repeat;

e não aparece nada! o fundo fica branco. ainda to criando o site, por isso não tem conteudo nenhum...mas n consigo colocar esse fundo. :(

Ariane disse...

VáriasCoisas hospeda a imagem em outro site: TinyPic ou ImageShack, por exemplo, que dá certo.