picture in circle

[davy_yg]

index.php

<?php
            //image gallery

            $result = mysql_query("SELECT * FROM `image_upload`") or die(mysql_error());

            while ($data = mysql_fetch_array($result)){

            echo $data['title'].'<br>';
            echo $data['news'].'<br><br>';
            //echo '<img src="images/'.$data['newfilename'].'">';

            echo '<style>
            .circular {
            width: 300px;
            height: 300px;
            border-radius: 150px;
            -webkit-border-radius: 150px;
            -moz-border-radius: 150px;
            background: url(http://localhost/portal_bootstrap/images/'.$data['newfilename'].') no-repeat;
            }       
            </style>';
            echo '<div class="circular"></div>';
            }

            ?>

Hello,

I thought this : $data['newfilename'] suppose to keep changing . I wonder why the result of : <div class="circular"></div>
the same picture all the way.

[rtrethewey]

The problem is that you put the '<style>' section in the 'while' loop, so the resulting HTML page contains multiple instances of the CSS rule for .circular. Then when the page is rendered, the browser uses the last instance of this rule for all of the <div class="circular"> tags.

Your code should read more like:

    <?php
    //image gallery
    echo '<style>
    .circular {
    width: 300px;
    height: 300px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    background-repeat:no-repeat;
    }
    </style>';
    $result = mysql_query("SELECT * FROM `image_upload`") or die(mysql_error());
    while ($data = mysql_fetch_array($result)){
     echo $data['title'].'<br>';
     echo $data['news'].'<br><br>';
     echo '<div class="circular" style="background-image:url(http://localhost/portal_bootstrap/images/' . $data['newfilename'] . ')"></div>';
    }
    ?>