Aplicar imagem de fundo atrás de uma div/container

[.:: Chico ::. 0]

Olá,

to construindo um theme/template para um blog e queria que o corpo das mensagens fossem na verdade um papel com linhas, rascunho, ou lined paper como conhecido. Acredito que só dê para fazer isso através de uma imagem. Construi a estrutura do blog, só que não consegui colocar as imagens de fundo para os textos satisfatoriamente.

 

Como sou novo no assunto, então percebi algumas coisas. Dentro de uma div com X altura e largura, faz com que a imagem, se for maior que as medidas determinadas para a div, se encaixe lá dentro. Sendo assim, para aproveitar a meiuca da imagem, no caso as linhas do papel, eu meti um center (ou um top), deste jeito:

background:url(Imagens/maintopborder.png) no-repeat top;

Porém as bordas da imagem ficaram sumidas. Conclui que eu deveria então colocar o que falta da borda, fora da div para complementar a imagem dentro da div e assim parecer ser uma coisa só. Porém não consegui fazer exatamente isso.

 

Estou usando o seguinte código na body para centralizar a página com largura de 700px:

margin: auto;

Fiz o seguinte: criei uma nova div, sobreposta a div original do meio do blog (posts) só que com largura maior, a largura total da imagem, que é no caso 830px. Porém, ele expande a largura para a direita, ele não faz como num texto justificado e eu não consegui chegar ao que quero explicado acima de forma alguma. Não consegui fazer a imagem ficar "justificada" (tanto para esquerda quanto para direita) e nem incluir a imagem do lado de fora da div para complementar a imagem.

 

Não sei como é a tecnica usada para fazer esse tipo de montagem em sites, já vi pela internet que é possível, mas não consigo.

Estou apenas aprendendo e a criação do layout do blog é mais um treino, mas por ser uma coisa simples, deve ter alguma solução.

 

Aqui a idéia mais ou menos como estará a parte onde vão os posts:

 

Só que falta as laterais desse pedaço de papel tanto para esquerda quanto para a direita que eu não consigo posicionar.

 

A verdade que estou levando uma surra para fazer isso. Do jeito que está só faltaria resolver isso e claro, consertar as linhas da folha, ou até meter opacidade nelas para não atrapalhar o texto em si. E tambem apareceu um probleminha no firefox, tirei a foto do IE7 por incrível que pareça.

 

Abraços e obrigado.

[Carlos Designer 0]

Então .:: Chico ::. não compreendi muito bem sua duvida, mas acho que você quer que o topo do seu background apareça acima do ponto onde começa o texto. Seria isso mesmo?

 

Se for, basta você ajutar o padding-top da div que tem o background até que ele apareça no ponto que você quer.

 

Algo assim:

 

div{
background:ulr(imagem.jpg) no-repeat top left;
padding-top:30px;
}

[.:: Chico ::. 0]

Olá Carlos,

o código que tu me deu me ajudou sim.

 

Eu dei uma bela editada no meu post e expliquei bem melhor agora a situação. Até porque descobri umas coisas novas, resolvi umas coias, mas surgiram outros problemas. Mas agora ta explicado a minha idéia de forma fácil.

 

Peço que leia novamente o primeiro post.

 

Abraços

[Carlos Designer 0]

então Chigo,

 

se possivel coloque seu código fonte para gente analizar que fica mais facil(html+css) e/ou um link online!

 

quais as dimensões desse plano de fundo?

 

sempre que for centralizar um elemento como uma div (e não o body) use:

 

div{
 margin:0 auto 0 auto;
 }

ou

 

div{
 margin:0 auto;
 }

A ideia ainda continua sendo aquela que eu te falei, crie a div com a largura do seu background e ajuste a posição do texto com padding.

 

Por exemplo, se a imagem de bg da div tem 830px, crie a div com 830px e para ajustar o conteudo interno da div a uma largura de 700px use o padding.

 

Mas preste atenção quando for usar o padding, pois ele aumenta a largura do elemento, ou seja se sua div tem 830px e você quer que o conteúdo fique numa área de 700px, é necessário aplicar um padding (margem interna) esquerdo e direito de 65px, mas ai a largura do container vai aumentar em 2x(65px) ficando com 960px, ai é necessário recalcular a largura, fazendo 830-65-65 que vai dar 700px (coincidência).

 

Ficando algo assim:

#conteudo{
margin:0 auto 0 auto;
width:700px;
background:url(imagem.jpg) no-repeat top center;
padding-top:30px; /*ajusta a margem interna superior da div*/
padding-right:65px;
padding-left:65px;
}

entenda o padding como a margem interna do elemento.

 

beleza!

 

qualquer duvida volte a postar e se possivel coloque seu código html+css.