Как изменить фон тела с помощью CSS в зависимости от размера экрана и наличия файла с PHP? - PullRequest
Новая
       146

Как изменить фон тела с помощью CSS в зависимости от размера экрана и наличия файла с PHP?

0 голосов
/ 30 мая 2020

Надеюсь, я смогу объяснить, что я хочу делать ОК. Мой сайт построен на базе PHP со страницами, созданными из базы данных mySQL. В этом случае я хочу изменить фон тела страницы проекта в зависимости от того, есть ли в папке изображение, которое соответствует идентификатору страницы (project_id). Следующий код отлично справляется с этим: 

 <body style="background: url(<?php 

 $background = dirname(__FILE__) . "/ $myMedia images/bg/ $row[project_id].jpg";
 $background = str_replace(" ", "", $background);

 if (file_exists($background)) {
     echo "images/bg/$row[project_id].jpg";
 } else {
     echo "images/bg.jpg";
 }

?>) repeat-x;" />

Однако я хочу изменить ТОЛЬКО фон страницы, если размер экрана больше 767 пикселей, в противном случае я хочу отображать другой фон для просмотра на мобильном телефоне (bg-mob-380.jpg). Я пробовал следующий код, но он не работает, и я не уверен, что делаю неправильно. 

 <body style="
@media only screen and (max-width: 767px) {
    background: #FFFFFF url(images/bg-mob-380.jpg) repeat-x;
}
@media only screen and (min-width: 768px) {
 background: url(<?php 

 $background = dirname(__FILE__) . "/ $myMedia images/bg/ $row[project_id].jpg";
 $background = str_replace(" ", "", $background);

 if (file_exists($background)) {
     echo "images/bg/$row[project_id].jpg";
 } else {
     echo "images/bg.jpg";
 }

?>) repeat-x;
}
" />

Любая помощь будет принята с благодарностью. Заранее спасибо :)

Ответы [ 3 ]

0 голосов
/ 30 мая 2020

Вы можете организовать это так, чтобы было немного легче читать: 

<?php 
$background = dirname(__FILE__) . "/ $myMedia images/bg/ $row[project_id].jpg";
$background = str_replace(" ", "", $background);

if (file_exists($background)) {
    $image = "images/bg/$row[project_id].jpg";
} else {
   $image = "images/bg.jpg";
}
?>

@media only screen and (max-width: 767px) {
background: #FFFFFF url('images/bg-mob-380.jpg') no-repeat fixed center;
}
@media only screen and (min-width: 768px) {
background: url('<?php echo $image ?>') no-repeat fixed center;
}

Повторяющиеся изображения - вот что делает головную боль.

0 голосов
/ 30 мая 2020

Удалось исправить. Я думаю, что из-за того, что у меня была другая таблица стилей, связанная со страницей, мне пришлось поместить свой код после этой ссылки, чтобы он перезаписал файл css. Вот код, который сработал на случай, если он кому-то поможет (спасибо Адаму за его переписывание, чтобы его было легче читать) 

<style>
<?php 
$background = dirname(__FILE__) . "/ $myMedia images/bg/ $row[project_id].jpg";
$background = str_replace(" ", "", $background);

if (file_exists($background)) {
    $image = "images/bg/$row[project_id].jpg";
} else {
   $image = "images/bg.jpg";
}
?>
@media only screen and (max-width: 767px) {
body {
background: #FFFFFF url('images/bg-mob-380.jpg') repeat-x;
}
}
@media only screen and (min-width: 768px) {
body {
background: #FFFFFF url('<?php echo $image ?>') repeat-x;
}
}
</style>
0 голосов
/ 30 мая 2020

URL-адрес изображения должен быть в одинарных / двойных кавычках: 

@media only screen and (max-width: 767px) {
background: #FFFFFF url('images/bg-mob-380.jpg') repeat-x;
}
@media only screen and (min-width: 768px) {
background: url('<?php 

$background = dirname(__FILE__) . "/ $myMedia images/bg/ $row[project_id].jpg";
$background = str_replace(" ", "", $background);

if (file_exists($background)) {
    echo "images/bg/$row[project_id].jpg";
} else {
   echo "images/bg.jpg";
}

?>') repeat-x;
}
" />

Изменить: - Это может быть вызвано этой переменной $row[project_id], которая должна быть похожей на $row['project_id'], поэтому попробуйте конкатенацию с работать через это.

Должно быть так 

$background = dirname(__FILE__) . "/ $myMedia images/bg/". $row['project_id'].".jpg";

и 

echo "images/bg/".$row['project_id'].".jpg";
...