Não consigo deixar imagens sobrepostas

[Throat 0]

Estou tentando criar um pequeno menu horizontal, então tenho o background do menu e alguns botões que deveriam ficar em cima. Só que já tentei de várias formas e não consigo colocar uma imagem sobreposta à outra.

 

Estava tentando da seguinte maneira no HTML:

 

<div id ="f1">

<div id="f2">

</div>

</div>

 

E no CSS:

 

#f1

{

background-image:url("fundo.png");

}

 

#f2

{

background-image:url("botao1.png");

}

 

Eu ainda não me preocupei com as posições, mas já manipulei-as várias vezes e nunca chegam a ficar uma em cima da outra. Sou bem iniciante. Agradeço desde já pela ajuda.

[sprUser 0]

Tenta usar id e class na mesma div....

 

não testei não mas pode ser que de certo

 

e no css muda f2 para class, faz um teste ai..... estou especulando aqui

[Public2004 79]

Teoricamente o que fez está correto ou seja, a div #f2 sobrepõe a div #f1, mas para isso se tornar visível deverá definir medidas para os elementos (altura e largura).

 

Att.

[Throat 0]

Mas no caso de eu não definir as medidas, não serão usadas aquelas naturais da imagem?

[Public2004 79]

Mas no caso de eu não definir as medidas, não serão usadas aquelas naturais da imagem?

 

Como background não! O elemento não assume dimensões a partir de uma imagem definida como bg.

Se você tem a imagem no tamanho desejado, defina as medidas dos elementos com o mesmo tamanho desta imagem. Se é uma imagem de repetição (x ou y) aplicada em elementos com medidas em "auto", esta se tornará visível a medida que acrescentar conteúdo a estes elementos.

 

Att.

[Throat 0]

Muito obrigado, caras!

Continuo não conseguindo, veja como ficou meu primeiro fundo de id f1:

 

 

#f1{

background-image:"fundo2.png";

background-repeat:no-repeat;

width:800px;

height:200px;

margin-left:left;

bottom:100px;

}

Porém ainda nem apareceu mesmo que mal posicionado.

[Public2004 79]

Seu code tá errado. Tente assim:

background-image:url(fundo2.png);

Defina corretamente seu "margin-left" com valores e o "bottom" se utiliza quando definido "position". Leia mais sobre posicionamento.

Att.

[Throat 0]

Eu já tinha tentado da forma url(""), mandei desse jeito porque não deu certo. Vou tentar colocar todas as informações de posicionamento. Obrigado.

[@gsales_ 0]

Cara, coloca position: relative e define z-index para cada uma