using php to add div class property - php

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).