Изображение из таблицы sql не соответствует css
Для изображений для моего веб-сайта я беру их из своей таблицы sql. Большинство изображений работают и стилизованы так, как должны. Однако изображения для фона моего заголовка нет, и я не могу понять, почему, поскольку другие изображения работают нормально.
Это код для фона заголовка, который показывает, как я беру изображение из своей таблицы sql:
<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>
Это css, которому он должен следовать:
/* Full height image header */
.background {
background-position: center;
background-size: cover;
min-height: 100%;
}
Также вы никогда не закрывали тег img "<img src='admin/uploads/".$row['image']."'"; должен быть "<img src='admin/uploads/".$row['image']."' />";
Если проблема полностью связана с вашим CSS, упростите свой пример. Просмотрите исходный код страницы в браузере и изучите вывод HTML. Нет причин уделять так много внимания серверному коду.
Да, он должен быть на фоне, что тогда вместо тега <img>? И спасибо, Димитрис, теперь разобрался
Ответы 1
Думаю, так и должно быть:
<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();
}
?>">
Таким образом, вместо создания тега <img> устанавливается атрибут background-image CSS. Затем ваш класс background сделает все остальное.
Обновлять. Что ж, пока мы на этом, вот немного улучшенная версия кода с функцией извлечения URL-адреса изображения, извлеченной в функцию многократного использования:
<?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) ?>;">
выдает ошибку, говорящую о неожиданном использовании, ожидающем { ?
ошибка исчезнет, если я сделаю $image url = function ($id) use ($db) { etc, а затем, очевидно, изменю imageUrl(1) на $imageUrl(1). Однако затем я получаю сообщение об ошибке, говорящее, что изображение не найдено, оно знает, что ищет, но по какой-то причине не может справиться
Ну, я не могу помочь с этим, так как у меня нет полной среды для воспроизведения. В любом случае, это всего лишь подсказка о том, как сделать код лучше. Если он у вас работает как есть, отлично, ничего потребности менять нельзя. Кстати, хороший улов с use.
Я поиграюсь с этим и посмотрю, смогу ли я заставить его работать, потому что это была бы довольно полезная функция, я думаю, но еще раз спасибо за вашу помощь, очень признателен
Вы выводите тег
<img>, но ваш CSS выглядит так, как будто вы ожидаете, что изображение будет на заднем плане?