Search code examples
phphtmlcssmedia-queriesbackground-image

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

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

Solution

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