Creating a responsive background image with PHP and Javascript

Question

I am building a website where I have a div with a background image. At the moment, I have 3 sizes of background images per image, one for fullscreen, one for smaller screens, and one for mobile. I know I can use @media screen for css backgrounds and scaling, but this would require that I create a new CSS rule for every image.

To resolve my problem, I thought I could use PHP, but it dawned on me that since PHP is serverside, the page would not be responsive and only select the correct image on the pageload. My current PHP code was roughly this:
EDIT: this code is useless since I overlooked the fact that window.screen.width is javascript and not PHP

<div style="background-image: url(    
<?php 
var screenWidth = window.screen.width;

if (screenWidth >= 1280)
{
    echo $imageregular
}
elseif (screenWidth >= 630 && screenWidth < 1280)
{
    echo $imagesmall
}
else 
{
    echo $imagemobile
}
;?>
);">
</div>

(please excuse any errors in my PHP, I'm still learning and I haven't tested this) using a php include, I would then include this PHP file in my parent HTML whenever I wanted an image like this, e.g.

<?php
$imageregular = '1.jpg';
$imagesmall = '2.jpg';
$imagemobile = '3.jpg';
include 'menuitem.php';
?>

So, how can I go about redoing this so that I use Javascript to detect the screenwidth and set the image, all the while keeping the flexibility of using PHP variables?

EDIT

Alright, since PHP can't discover browser widths, I assume I can use something like this:

$( window ).resize(function() {
  if ( $(window).width > 1280)
   {
      //somehow get a php variable and include it in here and do a .css('background-image','url(<?php echo $imageregular ?>');
   }
});

etc.

How can I use PHP variables in Javascript/Jquery?

You are simply making life difficult for you.. :)...You can save all the time in world by simply checking out media-queries in CSS3. To get you sarted : http://css-tricks.com/css-media-queries/ & http://mediaqueri.es/ . 3 sets of rules are all that u need to write... — Roy M J, Jan 16 '14 at 06:07
I looked through it, and am I missing something? I still think CSS media rules require a specification of the background image within the CSS file, which means I would have to create a new ID, element, and CSS class for each background image, which I was hoping to avoid with PHP. — Alexander Lozada, Jan 16 '14 at 06:10
No you need not have different id for each image. For same id, you can have different background images according to screen size which is quite simple. See : http://stackoverflow.com/questions/9506069/media-queries-and-background-images — Roy M J, Jan 16 '14 at 06:13
I know I can have different background images according to different screen sizes with media rules, but I am looking for completely different _sets_ of images, e.g. 3 sizes of each image, where I can set each image in my HTML without having to repeat myself. If I used media rules, I would need to create a new rule for each different set of images, which I'm hoping to avoid. — Alexander Lozada, Jan 16 '14 at 06:16

Roy M J · Accepted Answer · 2014-01-16T06:35:38.510

Something like this should do :

PHP :

$imageregular = '1.jpg';
$imagesmall   = '2.jpg';
$imagemobile  = '3.jpg';

HTML :

<div class="bg">

</div>

CSS :

.bg{
   background-image:url(<?php echo $imageregular; ?>);
}
//This should be inside the php page itself so that the variable is not empty

JS:

You can use the following to get the dimensions with which you can alter your coding :

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

Ill use window width for this :

$(document).ready(function(){
    resizeBg();         
});

//Getting resize event
$(window).resize(function() {
    resizeBg();     
});


function resizeBg(){
       var width = $(window).width();
        if(width<420){
             $(".bg").css("background-image", "url(<?php echo $imagemobile;?>)");
        }else if(width>420 && width<780){
             $(".bg").css("background-image", "url(<?php echo $imagesmall;?>)");
        }else{
             // do nothing as main image is already loaded via css
        }
}

Note : This is not tested and you would need to use the correct dimensions as you require. Just giving you an insight as to how it can be done. And this would need jquery library included as well.

Worked, thanks a ton! Only thing I had to modify was the else, as I put a value in for the largest image as well to make it universally customizable. — Alexander Lozada, Jan 16 '14 at 06:45

score 0 · Answer 2 · answered Jan 16 '14 at 06:11

0

There isnt anything like

window.screen.width

in PHP. You cant get screen dimensions on server side. You will have to handle it with JavaScript.

Or you can check the dimensions in JS and then redirect user to site with some special parametr

index.php?size=medium

But it is ugly solution :) The best would be using media queries...

answered Jan 16 '14 at 06:11

Jan Dlouhý

26
5

Thanks for the catch on window.screen.width, I stupidly overlooked the fact that it was a javascript variable and not PHP. Anyway, I guess what I need is a Javascript code that allows for its images to be PHP variables that I can set in my php include, though I'm not terribly sure how/if PHP to Javascript communication is done. As for the latter solution, that would just create a mess since I'm using image sets, so I would just use media rules if that were the case, but hopefully I can avoid that. – Alexander Lozada Jan 16 '14 at 06:19
JS communicates with PHP via AJAX. Something like this http://jsfiddle.net/Ag3Yw/ could work. The PHP file would send you the image scr based on the size you give him. – Jan Dlouhý Jan 16 '14 at 06:40

Creating a responsive background image with PHP and Javascript

2 Answers2