Pozycjonowanie grafiki/relatywne

pytanie zadane 26 listopada 2016 w HTML i CSS przez Dar3Q Obywatel (1,200 p.)

Cześć, wie ktoś jak "awatar" ustawić w lewym dolny rogu "tla"? Napisałem kod, ale awatar jest tuż obok, po prawej stronie tla. Mój kod:

<div id="tlo">
<?php

	echo '<img class="border" border=15 src="'.$_SESSION['tlo'].'" alt="" width="821" height="352" position="relative">';
	
	echo '<img class="border" border=15 src="'.$_SESSION['awatar'].'" alt="" width="152" height="152" position="relative" left="84px" bottom="91px">';
	
?>
	</div>

CSS:

#tlo
{
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
}

img.border
{
	border: 15px solid #ffffff;
}

2 odpowiedzi

odpowiedź 26 listopada 2016 przez TheFunny Gaduła (3,420 p.)
edycja 26 listopada 2016 przez TheFunny

odpowiedź 26 listopada 2016 przez hoktaur Pasjonat (22,250 p.)

Ja bym to zrobił tak:

<html>
<head>
<style>
#tlo {
	width: 821px;
	height: 352px;
	background-image: url('http://www.tapeciarnia.pl/tapety/normalne/49982_szczeniaki_shar_pei.jpg');
	position: relative;
}
img.border
{
    border: 15px solid #ffffff;
	position: absolute;
	left: 0px;
	bottom: 0px;
}
</style>
</head>
<body>
<div id="tlo">
     <img class="border" src="http://www.tapeciarnia.pl/tapety/srednie/25260_mordka_pieska.jpg" alt="" />
</div>
</body>
</html>

oczywiście musisz podstawić to do PHP'a ale chodzi od zasadę