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

Question

I hope I can explain what I want to do OK. My site is built in PHP with pages created from a mySQL database. In this case, I want to change the body background of the project page depending on whether there is an image in the folder that matches the ID of the page (project_id). The following code works fine in accomplishing this:

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

However, what I want to do is ONLY change the background of the page if the screen size is larger than 767px, otherwise I want to display a different background for the mobile phone view (bg-mob-380.jpg). I've tried the following code but it doesn't work, and I'm not sure what I'm doing wrong.

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

Any help would be appreciated. Thanks in advance :)

Vishal Kamlapure · Answer 1 · 2020-05-30T00:09:36.787

The url for image should be in single/double quotes:

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

Edit :- It can be caused because of this variable $row[project_id] which should be like $row['project_id'] , so try concatenation to work through this.

It should be like this

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

and

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

Thank you for your fix suggestion, however the code still doesn't work. The background doesn't change even though there is a bg file in the folder that has that matching ID. — Mitch, May 29 '20 at 23:22

score 0 · Answer 2 · answered May 29 '20 at 23:41

0

You can organize this in a way that is a little easier to read:

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

Repeating images are what headaches are made from.

answered May 29 '20 at 23:41

Adam Winter

1,680
1
12
26

Thanks for cleaning up the code. What you've done makes sense but for some reason it still isn't working. The page doesn't display the new background with the ID even though there is one on file, it only displays the default images/bg.jpg – Mitch May 29 '20 at 23:55
What's the value of $myMedia? – Adam Winter May 30 '20 at 00:01
I'll be honest, I used the code from another question on stackoverflow (https://stackoverflow.com/questions/15074013/php-if-file-exists/20548245) so I'm not sure haha. The original code did work though, but it's this whole media screen stuff that is stuffing things up. – Mitch May 30 '20 at 00:07
Have you tried just putting the file directly into it, like you're doing with 'images/bg-mob-380.jpg'? – Adam Winter May 30 '20 at 03:07

score 0 · Accepted Answer · answered May 30 '20 at 01:06

Managed to fix it. I think because I had another style sheet linked to the page, I had to put my code after that link so that it overwrote the css file. Here's the code that worked in case it helps anyone (thanks Adam for rewriting it so it's easier to read)

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

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

3 Answers3