[PHP] Botstrap i responsywność strony z obrazkami. Opcje

[brzanek]

Witam mam problem z dostosowaniem mojej strony pod inne rozdzielczości. Moja strona oparta jest na bootstrapie. Wiem z dokumentacji jak dostosować ją pod np. urządzenia mobilna ale mam jeden problem z obrazkami.
Wiem, że stosując class="img-responsive" ale na moich obrazkach mam wyświetlane w odpowiednich miejscach pewne wartości przez css.
Tak wygląda kod z obrazkiem.

[PHP] pobierz, plaintext 
echo "<div class='tlo23'>";
{
$result = mysql_query("SELECT * FROM obecnie WHERE id_miasto =1 ORDER BY id DESC LIMIT 1") or die(mysql_error());
while($row = mysql_fetch_array($result)) {	?>
<div class="choszcznop0" data-toggle="tooltip" data-placement="top"><i class="wi wi-forecast-io-<?php echo $row['tIcon'];?>"></i></div>
<?php echo "<div class='choszcznop0temp' data-toggle='tooltip' data-placement='top' title='Temperatura max &deg;C' style='color: ".$tempArray2[ceil($row['tTempHigh'])].";'> ".ceil($row['tTempHigh'])."&deg;C</div>"; ?>
<?php  }
}
{
$result = mysql_query("SELECT * FROM obecnie WHERE id_miasto =7 ORDER BY id DESC LIMIT 1") or die(mysql_error());
while($row = mysql_fetch_array($result)) {	?>
<div class="debnop0" data-toggle="tooltip" data-placement="top"><i class="wi wi-forecast-io-<?php echo $row['tIcon'];?>"></i></div>
<?php echo "<div class='debnop0temp' data-toggle='tooltip' data-placement='top' title='Temperatura max &deg;C' style='color: ".$tempArray2[ceil($row['tTempHigh'])].";'> ".ceil($row['tTempHigh'])."&deg;C</div>"; ?>
<?php  }
} 
 
{
$result = mysql_query("SELECT * FROM obecnie WHERE id_miasto =2 ORDER BY id DESC LIMIT 1") or die(mysql_error());
while($row = mysql_fetch_array($result)) {	?>
<div class="szczecinp0" data-toggle="tooltip" data-placement="top"><i class="wi wi-forecast-io-<?php echo $row['tIcon'];?>"></i></div>
<?php echo "<div class='szczecinp0temp' data-toggle='tooltip' data-placement='top' title='Temperatura max &deg;C' style='color: ".$tempArray2[ceil($row['tTempHigh'])].";'> ".ceil($row['tTempHigh'])."&deg;C</div>"; ?>
<?php  }
}
{
$result = mysql_query("SELECT * FROM obecnie WHERE id_miasto =4 ORDER BY id DESC LIMIT 1") or die(mysql_error());
while($row = mysql_fetch_array($result)) {	?>
<div class="swinoujsciep0" data-toggle="tooltip" data-placement="top"><i class="wi wi-forecast-io-<?php echo $row['tIcon'];?>"></i></div>
<?php echo "<div class='swinoujsciep0temp' data-toggle='tooltip' data-placement='top' title='Temperatura max &deg;C' style='color: ".$tempArray2[ceil($row['tTempHigh'])].";'> ".ceil($row['tTempHigh'])."&deg;C</div>"; ?>
<?php  }
}
{
$result = mysql_query("SELECT * FROM obecnie WHERE id_miasto =8 ORDER BY id DESC LIMIT 1") or die(mysql_error());
while($row = mysql_fetch_array($result)) {	?>
<div class="drawskop0" data-toggle="tooltip" data-placement="top"><i class="wi wi-forecast-io-<?php echo $row['tIcon'];?>"></i></div>
<?php echo "<div class='drawskop0temp' data-toggle='tooltip' data-placement='top' title='Temperatura max &deg;C' style='color: ".$tempArray2[ceil($row['tTempHigh'])].";'> ".ceil($row['tTempHigh'])."&deg;C</div>"; ?>
<?php  }
}
{
$result = mysql_query("SELECT * FROM obecnie WHERE id_miasto =3 ORDER BY id DESC LIMIT 1") or die(mysql_error());
while($row = mysql_fetch_array($result)) {	?>
<div class="koszalinp0" data-toggle="tooltip" data-placement="top"><i class="wi wi-forecast-io-<?php echo $row['tIcon'];?>"></i></div>
<?php echo "<div class='koszalinp0temp' data-toggle='tooltip' data-placement='top' title='Temperatura max &deg;C' style='color: ".$tempArray2[ceil($row['tTempHigh'])].";'> ".ceil($row['tTempHigh'])."&deg;C</div>"; ?>
<?php  }
}
echo "<div class='loogo'></div>";
echo '</div>';
[PHP] pobierz, plaintext 

Po zastosowaniu class="img-responsive" w kodzie tło oczywiście zmniejsza się w zależności od rozdzielczości ale zamieszczone na nim wartości są rozwalone przez wcześniejsze położenie zawarte w kodzie css.
Jak mogę rozwiązać ten problem?
Może jest jakaś możliwość zapisania takiego obrazka z tłem i nałożonymi na nim wartościami?

Ten post edytował brzanek 15.03.2017, 18:48:58

[Lord]

ale jakis screen ? albo co masz w tym css?

[brzanek]

Część kodu css

[PHP] pobierz, plaintext 
.tlo23 {
	background: url(../images/malamapaw.jpg) no-repeat;
	width: 274px;
	height:310px;
	float: left;
	margin-top: 0px;
	margin-left: 0px;
}
.choszcznop0 {
position: absolute; left: 130px; top: 205px;
font-size: 28px;
font-weight:900;
color: #ffffff;
text-shadow: rgb(0, 0, 0) 2px 2px 3px;
}
.szczecinp0 {
position: absolute; left: 50px; top: 167px;
font-size: 28px;
font-weight:900;
color: #ffffff;
text-shadow: rgb(0, 0, 0) 2px 2px 3px;
}
[PHP] pobierz, plaintext 

[Lord]

cieżko mi powiedzieć ale kilka uwag:

1. Możesz uzywać background-size: cover/contain;
2. Absolute możesz podać w % a nie w px

Ten post edytował Lord 15.03.2017, 18:56:03