来自sql表的图像不遵循css

Question

For the images for my website I take them from my sql table. The majority of the images are working and style how they are supposed to. However, the image for my header background is not and I cannot figure out why since the other images work fine.

This is the code for the header background which shows how I take the image from my sql table:

<header class="background -display-container -grayscale-min" id="home">
        <?php
        try {
        $stmt = $db->query('SELECT image_title, image FROM images WHERE id= 1 ');
        while($row = $stmt->fetch()){
        echo "<img src='admin/uploads/".$row['image']."'";
        }
    }catch(PDOException $e) {
                echo $e->getMessage();
            }
?> 

  <div class="logan-display-left slogan" style="padding:48px">
    <span class="-jumbo -hide-small">Baking for you since '62</span><br>
    <p><a href="#about" class="-button -white -padding-large -large -margin-top -opacity -hover-opacity-off">Learn more</a></p>
  </div> 
</header>

This is the css it is supposed to follow:

/* Full height image header */
.background {
  background-position: center;
  background-size: cover;
  min-height: 100%;
}

Answer 1

I think this is how it should be:

<header class="background -display-container -grayscale-min" id="home" style="background-image: url(
        <?php
        try {
        $stmt = $db->query('SELECT image_title, image FROM images WHERE id= 1 ');
        while($row = $stmt->fetch()){
        echo "admin/uploads/".$row['image'];
        }
    }catch(PDOException $e) {
                echo $e->getMessage();
            }
?>">

So, instead of producing <img> tag, background-image CSS attribute is set. Then your background class does the rest.

Update. Well, while we're at it, here is a bit better version of the code with image URL fetching functionality extracted into reusable function:

<?php
function imageUrl($id) use ($db)
{
    try {
        $stmt = $db->query('SELECT image FROM images WHERE id=  ' . (int)$id);
        $row = $stmt->fetch();
        return "admin/uploads/".$row['image'];
    } catch(PDOException $e) {
        // This way you at least will see error in your server logs, and probably in browser console:
        return $e->getMessage();
    }
}
?>
<header class="background -display-container -grayscale-min" id="home" style="background-image: url(<?= imageUrl(1) ?>;">