回声背景图像内联样式未显示

Question

why is echoing background-image url does not work? I'm trying to make each div with the same class have different background image

<?php
echo "<div class='paket_title' style='background-image :url(\"img1.jpg\"); '>$r[head]</div>";
 ?>

here is the list of codes I've tried after searching for solutions :

echo "<div class='paket_title' style='background-image :url(\"img1.jpg\"); '>$r[head]</div>";

echo "<div class='paket_title' style='background-image :url(\'img1.jpg\');'>$r[head]</div>";

echo "<div class='paket_title' style='background-image :url(\"img1.jpg\");'>$r[head]</div>";

echo '<div class="paket_title" style="background-image:url(\"img1.jpg\");">$r[head]</div>';

echo '<div class="paket_title" style="background-image:url(\'img1.jpg\');">$r[head]</div>';

echo '<div class="paket_title" style="background-image:url('img1.jpg');">$r[head]</div>';

echo '<div class="paket_title" style="background-image:url('img1.jpg');">$r[head]</div>';

echo "<div class='paket_title' style='background-image:url('img1.jpg');'>$r[head]</div>";

echo "<div class='paket_title' style='background-image:url("img1.jpg");'>$r[head]</div>";

echo '<div class="paket_title" style="background-image:url(img1.jpg);">$r[head]</div>';

echo "<div class='paket_title' style='background-image:url(img1.jpg);'>$r[head]</div>";

echo "<div class='paket_title' style='background-image :url(\"img1.jpg\"); '>" . $r['head'] . "</div>";

none of the above code is showing the image. I put the image in the same directory with this php file, even copy pasted the image to every subdirectory of my website folder.

here is the full code for this :

<?php
 if ($_GET['module']=='paketusaha'){
 $paket = mysql_query("SELECT * FROM paket_usaha ORDER BY id_paket DESC LIMIT 5");
  while ($r=mysql_fetch_array($paket)){
  $id_panel=1;
  $bg=$r['bgcolor'];
switch ($bg) {
  case "red" :
  echo "<div class='paket_title' style='background-image :url(\"img1.jpg\"); '>$r[head]</div>";
  break;

  case "blue" :
  echo "<div class='paket_title' style='background-image :url(\"img2.jpg\"); '>$r[head]</div>";
  break;

  case "yellow" :
  echo "<div class='paket_title' style='background-image :url(\"img2.jpg\"); '>$r[head]</div>";
  break;


}


 echo "
 <img src='paket_usaha/$r[gambar]'></img>
  <div class='harga-pkt'>$r[judul]</div>
   <div id='container'>
    <div class='expandable-panel' id='cp-$id_panel'>
    <div class='expandable-panel-heading bold' style='background-color : $r[headcolor]; color : white;' >
        <h2>klik disini untuk info paket<span class='icon-close-open'></span></h2>
     </div>
    <div class='expandable-panel-content' >
        <p>$r[isi]</p>
    </div>
</div>

"; $id++;} ?>

everything is working fine except the background-image not showing, I even changed it to just background and still no luck

Answer 1

Do it like this:

echo "<div class='paket_title' style='background-image :url(\\"img1.jpg\\"); '>" . $r['head'] . "</div>";

you must have a single quote for your $r['head'] and also a separator for your string and variable echo.

Answer 2

alright I got a trick to make this work

first I make a CSS named after color for example :

.red {
   background-image : url("img1.jpg");
  }
 .blues {
   background-image : url("img2.jpg");
  }

now that the CSS is ready, just add the class to each div like this :

  <?php 
     switch ($bg) {
     case "red" :
      echo "<div class='paket_title red' >$r[head]</div>";
      break;

     case "blue" :
       echo "<div class='paket_title blues'>$r[head]</div>";
     break;

      }

that's it, each div now has different background image because each has specific CSS class that sets the background-image.

Answer 3

1. first thing separate your css and php.

2. and use php in html like given below to avoid the errors of ' and " .

    <div class='paket_title' style='background-image :url(\\"img1.jpg\\"); '><?php echo $r[head];?></div> 

and you can also use an if statement for this; first make css as you said in your answer.

<?php
while ($r=mysql_fetch_array($paket)){
   if($r % 2 == 0)){
?>
       <div class='paket_title red' ><?php echo $r[head];?></div>
<?php
   }else{
 ?>  
       <div class='paket_title blues' ><?php echo $r[head];?></div>
<?php
   }
}
 ?>