如何根据屏幕尺寸使用 CSS 更改正文背景，如果文件存在 PHP？

Question

我希望我能解释清楚我想做什么。我的网站是在 PHP 中构建的，页面是从 mySQL 数据库创建的。在这种情况下，我想根据文件夹中是否有与页面 ID (project_id) 匹配的图像来更改项目页面的 body 背景。以下代码可以很好地完成此任务：

 <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;" />

但是，我只想在屏幕尺寸大于 767px 时更改页面背景，否则我想为移动 phone 视图显示不同的背景（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;
}
" />

如有任何帮助，我们将不胜感激。提前致谢:)

Answer 1

图像的 url 应该在 single/double 引号中：

@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";

Answer 2

你可以用一种更容易阅读的方式来组织这个：

<?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;
}

重复的图片让人头疼。

Answer 3

设法修复它。我想因为我有另一种样式 sheet linked 到页面，所以我不得不把我的代码放在那个 link 之后，以便它覆盖 css 文件。这是可以帮助任何人的代码（感谢 Adam 重写它以便更容易阅读）

<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>

如何根据屏幕尺寸使用 CSS 更改正文背景，如果文件存在 PHP？

How do I change the body background with CSS depending on the screen size, and if a file exists with PHP?

html

css

php

background-image

media-queries