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%;
}
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) ?>;">