Obraz za napisami buttona

pytanie zadane 31 maja 2016 w HTML i CSS przez Mr.Pretty Nowicjusz (130 p.)

Witam! Co zrobić aby te obrazki były za napisami ? Mógłby mnie ktoś nakierować

2	komentarz 31 maja 2016 przez niezalogowany wrzuć kod

komentarz 31 maja 2016 przez Mr.Pretty Nowicjusz (130 p.)

<div id="surowce">

<!--Zboże-->
<div id="zboze" >
<a class="szboze"></a>
<form  method="post" action="zboze_s.php">
<input class="gra" type="submit" name="sum" value="Dodaj zboze">
</form>
</div>
<!--Drewno-->
<div id="drewno">
<a class="sdrewno"></a>
<form action="drewno_s.php" method="post">
<input class="gra" type="submit" name="sum1" value="Dodaj drewno">
</form>
</div>
<!--Kamien-->
<div id="kamien">
<a class="skamien"></a>
<form action="kamien_s.php" method="post">
<input class="gra" type="submit" name="sum1" value="Dodaj kamien">
</form>
</div>
<!--Kamien-->
<div id="woda">
<a class="swoda" ></a>
<form action="woda_s.php" method="post">
<input class="gra" type="submit" name="sum1" value="Dodaj wode">
</form>
</div>
</div>

komentarz 31 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

z-index w CSS: https://css-tricks.com/almanac/properties/z/z-index/

komentarz 31 maja 2016 przez Mr.Pretty Nowicjusz (130 p.)

Właśnie tego próbowałem i nic nie dało :(

komentarz 31 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż kod CSS.

komentarz 31 maja 2016 przez Mr.Pretty Nowicjusz (130 p.)

.gra
{
	width: 200px;
	height: 200px;
	background-color: #36b03c;
	font-size:25px;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	letter-spacing: 2px;
	outline: none;
	font-family: 'Poiret One', cursive;
	z-index:2;
	
}
.szboze
{
	width: 200px;
	height: 200px;
	text-decoration: none;
	background: url("img/zboze.png") no-repeat 0px 0px;
	position: fixed;
	margin-left:1px;
	margin-top:1px;
	z-index:1;
	
}

komentarz 31 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

W tagach <a> są te obrazki umieszczane?

komentarz 31 maja 2016 przez Mr.Pretty Nowicjusz (130 p.)

tak ,bo jak zmieniam na <div> to się strona "psuje"

EDIT:zmieniłem na <div> ale i tak nie działa

komentarz 31 maja 2016 przez Michał Kazula Pasjonat (19,540 p.)

Spróbuj tak:

.gra
{
    width: 200px;
    height: 200px;
    background-color: #36b03c;
    font-size:25px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 2px;
    outline: none;
    font-family: 'Poiret One', cursive;
    z-index:0; /* Zmiana */
     
}
.szboze
{
    width: 200px;
    height: 200px;
    text-decoration: none;
    background: url("img/zboze.png") no-repeat 0px 0px;
    position: fixed;
    margin-left:1px;
    margin-top:1px;
    z-index:-1; /* Zmiana */
     
}

komentarz 1 czerwca 2016 przez Mr.Pretty Nowicjusz (130 p.)

Niby obrazek jest za przyciskiem ale chodziło mi o to żeby był za napisami.Być możę to wina tego że jest tam button

1	komentarz 1 czerwca 2016 przez Michał Kazula Pasjonat (19,540 p.) Może. A próbowałeś ustawić tło buttona jako obrazek? Zmienić rozmiar buttona do wielkości obrazka? Wtedy napis masz zawsze na wierzchu.