Em princípio fazes com uma imagem de fundo fixa, i.e com css de
body
{
background-image:url('imagem');
background-repeat:no-repeat;
background-attachment:fixed;
}
http://www.w3schools.com/cssref/pr_background-attachment.asp
Certo… Adicionei o Código ao css da seguinte forma
body
{
background-image:url('http://img825.imageshack.us/img825/5127/fundoos.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}
Mais infelizmente nada mudou, nem o fundo, nem nada…
Nota: Para o fundo geral do blog eu usei a seguinte imagem http://img825.imageshack.us/img825/5127/fundoos.jpg
Ela foi carregada direto do meu PC através das opções do próprio tema
Pelo que percebi, queres criar um gradient no fundo do website é isso?
Em caso de ser isso tens de colocar no fundo uma imagem que tenha esse gradient e definir que a mesma repete no eixo horizontal e colocar então a cor do fundo como branco sólido, algo deste género:
body{
background-image: url('endereço/da/imagem.jpg');
background-color: #FFFFFF; /*branco*/
background-repeat: repeat-x;
}
Sim… É exatamente isso, exceto por uma coisinha…
O fundo do site não é branco… A imagem em gradient deveria ir desaparecendo dando lugar para uma imagem de fundo como acontece no site:
http://marimoon.mtv.uol.com.br/
Note, que no fundo do blog, existe uma imagem que se repete, preenchendo toda a área, e então a imagem em Gradient se sobrepõe ao fundo. Seria mais ou menos assim:
Fundo Gradient; Sobre; O fundo do blog com uma imagem “X”
Compreende!?
Para esse efeito, eu criaria uma div extra sobre o fundo do website, com width: 100% e a altura da imagem do gradient.
Utilizando a propriedade z-index, podes sobrepor depois o conteudo do website essa div.
Tem como descolar um passo a passo, ou algo do genero?!
Vlw
HTML:
<body>
<div id="efeito"></div>
<div id="conteudo">
<p>conteudo do blog</p>
</div>
CSS:
body{
background: url('endereço/da/imagem.jpg') top left; /*imagem de fundo alinhada no topo, esquerda e a repetir no eixo x e y*/
}
#efeito{
position: relative;
float: left;
width: 100%;
height: alturadaimagempx;
z-index: 1;
}
#conteudo{
position: relative;
z-index: 10;
}
Será mais ou menos isto, não testei mas é esta a base para fazeres o que pretendes.
