Question

I am using WAMP. I want to take background image URL from my database and want to show this in div class ‘box’. I tried it by followed way but couldn’t succeed. the last background image is appearing on each box while I want to show different images. Code I am using is

<?php 
    $feild_set = get_all_feilds();
    while($feild = mysql_fetch_array($feild_set)) { 
        $url = $feild['background_image_url'];
        echo "<style>
            .box { 
                width: 300px ;
                height: 100px;
                background-image: $url;
                background-visibility: visible;
                border: 1px #00FF33;
                margin-bottom: 10px;
                display: inline-table;
                margin-right: 10px;
            }
            </style>";
        echo "<div class=\"box\">";
        echo "<a href=\"content.php?feild=" . $feild['id'] . "\" ><block_holder>{$feild['menu_name']}</block_holder></a>"; 
        echo "</div>";
    }
?>

Thanx in advance

Answer 1

Try this:

<?php 

  echo "
    <style>
      .box { 
        width: 300px ;
        height: 100px;
        background-visibility: visible;
        border: 1px #00FF33;
        margin-bottom: 10px;
        display: inline-table;
        margin-right: 10px;
      }
    </style>";

  $field_set = get_all_feilds();

  while ($field = mysql_fetch_assoc($field_set)) {
    echo '
    <div class="box" style="background-image:'.htmlspecialchars($field['background_image_url']).';">
      <a href="content.php?feild='.htmlspecialchars($field['id']).'">
        <block_holder>'.htmlspecialchars($field['menu_name']).'</block_holder>
      </a>
    </div>';
  }

?>

---

What have I done?

• Placed the declaration of the .box CSS class outside the loop so it is only output once
• Changed mysql_fetch_array() to mysql_fetch_assoc() as it is less confusing and more efficient
• Removed the background-image: property from the .box class
• Added a background-image: property to an inline style= attribute for each div and wrapped the URL of the image in url() (this has been undone as it seems the URLs are stored in the database with this already done
• Passed data from the database through htmlspecialchars() before outputting it
• Corrected the spelling of feild to field where it can be done without breaking the rest of your code
• Some general indentation and quote tidying and readability fixes

---

As it was, your CSS .box class was declared more than once. Because of the cascading nature of CSS, only the values used in the last declaration would have been used – each declaration of a property overrides the last, which is why you were only seeing the last image. You also would not need to declare those details more than once – the whole idea of a class is that you can declare it once and use it multiple times. If you want element-specific properties, use IDs or inline styles (preferably IDs, but I have used inline styles here for simplicity).