background de imagem efinindo algum espaçamento

[Eduardo Giullyanny 1]

Boa tarde amigos, preciso saber se é possivel com dar uma margin na imagem q busquei atravez do background...

 

o esquema é tipo assim.:

 

#div-com-imagem {background:url(imagem-buscada.ext) no-repet; margin-left:10px;}

 

essa imagem eu gostaria q ficasse por baixo, poís vai vir uma imagem por cima, maior na largura, mas se essa imagem q vai ficar por baixo n pode ficar alinhada ao centro, esquerda ou direita, pq sai fora do layout e ela precisa ficar por cima.

 

ou poderiam me explicar outra forma de fazer isso...

[William Bruno 1501]

coloca uma imagem do efeito final.

 

se entendi, seria o 'padding' a tua solução.

[Evandro Oliveira 331]

basta posicionar no formato x y

 

background: url('...') 20px 10px no-repeat;

 

Se você omitir um dos dois parâmetros, o parâmetro existente será utilizado como distância horizontal (eixo X). Para alterar a distância vertical, defina algum valor para o primeiro parâmetro

 

background: url('...') 0 50px no-repeat;
background: url('...') top 50px no-repeat;
background: url('...') center 50px no-repeat;
background: url('...') bottom 50px no-repeat;

[Eduardo Giullyanny 1]

acho q n, talvez se fosse a imagem de cima daria certo, mas preciso posicionar a imagem de fundo da div.

 

seria tipo um efeito em uma sacaria...

 

colocamos um efeito sobre a sacaria na hr do fireworks, mas qdo fui passar isso para o css, ai ficou a dúvida, poderia colocar o efeito com tudo, mas vei entrar sacarias diferentes, mas o efeito vai continuar o msm, tem tambem a descrição de cada produto q o efeito num vai entrar

 

ai o q eu pensei foi.: <div id="nome">

<img src="imagem" />

</div>

 

a div eu colocaria uma imagem de fundo(seria a sacaria) e a imagem seria um efeito sobre ela, uma decoração...

 

mas na imagem de fundo q no css eu vou buscar com css com o background, eu preciso dar um espaço para o lado direito uns 10px

 

vejam.: Clique aqui

tem umas sacaria ai, ai pode entender melhor...

 

oh brother, Evandro Oliveira num tinha visto o seu post não

 

vlw pelas dicas

 

obrigado a todos pelas dicas, qualquer coisa eu posto novamente

[Evandro Oliveira 331]

O efeito é esse arco dourado, correto?

 

Faça a diferenciação entre o que É importante para o conteúdo e o que não é. Há uma inversão de valores entre as imagens. Você quer tornar a ilustração do produto uma decoração e a decoração um componente do conteúdo. É o contrário!

 

Já pensou, cada vez que for adicionar um produto novo, adicionar uma nova linha no CSS do background da sacaria?!

 

A sacaria é a imagem, ilustração do produto, faz parte do conteúdo e deve ser montada como imagem. O efeito, podemos montar com posicionamentos.

 

Flutue a imagem atrás da descrição, defina o arco como plano de fundo da descrição, fazendo o posicionamento como citei no post acima.

 

Defina um padding-top na descrição de forma a não invadir a imagem do produto.

 

O resultado é algo semelhante a isso

<li>
<img src="produto_amostra.png" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</li>

 

li img {
position: absolute;
z-index: -1;
}

li p {
background: url('arco.png') 0 20px no-repeat;
padding-top: 80px;
}