Call different set of random images based on screen resolution: PHP? -

I have a homepage that loads random full-screen background images, but because of (I am confident) Rendering problem on mobile is called the size of the images.

I am using PHP script to call images, is it possible to call a separate set of PHP images, if the width of the screen is less than 1080px?

html before the html in html file:

  & lt ;? Php $ bg = array ('bg-01.gif')  
, 'bg-02.gif', 'bg-03.gif', 'bg-4.gif', 'bg-055 .gif ',' bg-06.gif ',' bg-07.gif ',' bg-08.gif ',' bg-09.gif ',' bg-10 gif ',' bg-11.gif ' ,); // array of file names $ i = rand (0, count ($ bg) -1); // Create array of random number of array $ selected bug = "$ bg [$ i]"; // Set variable which was chosen as a random file name? & Gt;  

And to make it CSS styling (I think!):

Thank you for your help.

You can do it with Javascript / jquery:

Images with names As:
img-XY.gif
X: The number based on the resolution, for example 8 will be for the width of about 800 pixels.
Y: Number for every resolution image ( 0,1,2,3 ... 9 in the example)

  & lt; Script & gt; Var w = $ (window). With (); Image = "IMG-" + Math Floor (w / 100) + "-" + Math. Floor (Math.Random) * 10) + ".gif"; $ ('Body') CSS ("background-image", "url ('/ imagePath /" + + "+"') "); & lt; / script & gt;  

Required:

  / imagePath / img-0-0.gif // Images 0 to 299px width img-0- 1.gif img-0-2.gif img-0-3. Gif img-0-4.gif img-0-5.gif img-1-0.gif // 300 to 599 pixels width of image img-1- 1.gif img-1-2.gif img-1 -3.gif img-1-4.gif img-1-5.gif img-2-0.gif // 600 to 899 pixels width of image img-2- 1.gif img-2-2.gif img -2-3.gif img-2-4.gif img-2-5.gif img-3-0.gif // Images 900 to 1199 pixels width img-3- 1.gif img-3-2 Gif img-3-3.gif img-3-4.gif img-3-5.gif img-4-0.gif // Images 1200px width IMG-4-1 to Gif img-4-2.gif img- 4-3.gif img-4-4.gif Img-4-5.gif  

With 6 images (0 to 5) and having each 300px width should be a group of images, code:

 < Code> & lt; scripts & gt; Var w = $ (window) .with (); if (w <1500) {// width width 1500px widthId = Math.floor (w / 300);} and {// IID = 4} image = "IMG-" + width ID + "-" + Math.flur (math.rendum) * 6) + ".gif" for resolution of width of 1500 or more; $ ('Body') CSS ("background-image", "url ('/ imagePath /" + + "+"') "); & lt; / script & gt;