[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