0

The following code works fine to display 1 of possible 4 background images with a corresponding background color on desktop browsers (see methodally.com). However on iOS, the image only appears when the background is white. When a color background is presented, the image does not appear. All images are the roughly the same size. Any thoughts?

Update: Also tried switching the order of the arrays. No luck. Even when the white background and associated image are last in the array, this is the only combination that appears on iOS.

Here is my index.php file:

<?php
$bl = array('logo-white.png', 'logo-pink.png', 'logo-blue.png', 'logo-teal.png' ); 
$bc = array('#fdfdfe', '#b0265d', '#040442', '#43a5ae' ); 
$i = rand(0, count($bl)-1); // generate random number size of the array
$selectedBl = "$bl[$i]"; // set variable equal to which random filename was chosen
$selectedBc = "$bc[$i]"; // set variable equal to corresponding background color
?>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html { 
   width:100%; 
   height:100%; 
   background: <?php echo $selectedBc; ?> url(/img/<?php echo $selectedBl; ?>) center center no-repeat;
   background-size:60%;
}
</style>
</head>
<body>
</body>
</html>
PhearOfRayne
  • 4,990
  • 3
  • 31
  • 44
Eric Green
  • 7,385
  • 11
  • 56
  • 102
  • 1
    possible duplicate of [(Really) Long Background Image Does Not Render on iPad Safari](http://stackoverflow.com/questions/9046143/really-long-background-image-does-not-render-on-ipad-safari) – Pete Nov 01 '13 at 14:29
  • thanks, @Pete. i read something similar, but in my case, all images are the same size (in kb and pixels). so i don't know why only the image associated with the white background will display. – Eric Green Nov 01 '13 at 14:31
  • I would use a media query to load a smaller image if the screen size isn't too large - not sure who has a screen resolution of 4000px so you may want to make them smaller anyway. not sure why your white one would work – Pete Nov 01 '13 at 14:32
  • reducing from 4000w to 2000w did the trick, but i am not sure why. the white version displayed on iOS at 4000w. – Eric Green Nov 01 '13 at 14:47
  • weird, could be some sort of colour rendering issue with large pngs but that's just a complete guess! – Pete Nov 01 '13 at 15:22

1 Answers1

1

@Pete: I would use a media query to load a smaller image if the screen size isn't too large - not sure who has a screen resolution of 4000px so you may want to make them smaller anyway. not sure why your white one would work

Me: reducing from 4000w to 2000w did the trick, but i am not sure why. the white version displayed on iOS at 4000w.

Eric Green
  • 7,385
  • 11
  • 56
  • 102
  • [No mystery as to why](http://stackoverflow.com/questions/14227678/background-image-will-not-show-on-ios-but-shows-fine-on-other-browsers/15034916#15034916) – steveax Dec 05 '13 at 22:20
  • thanks, @steveax. i understand why reducing works given the specs, but i don't know why one version of the image with a white background would appear even at 4000w. – Eric Green Dec 06 '13 at 07:21
  • One color == lower bit depth. – steveax Dec 06 '13 at 08:05