Menu
I'm totally confused and wondering whether i'm just missing something simple, but i am unable to display a background image on an ipad or within the ipad simulator.
As a test i put together the following simple page:
<html>
<head></head>
<body>
<img src="content_box_black_background.png" />
<div style="height: 100px; width: 500px; background:url(content_box_black_background.png);">
</div>
</body></html>
As a test I am also outputting the image directly above the div block. In chrome they both appear but in the ipad simulator neither do. Any ideas?
560
It could be related to the dimensions of the image. The Safari Web Content Guide mentions that the maximum size for GIF, PNG and TIFF images is 3 megapixels (3 * 1024 * 1024). I ran into a similar issue displaying a menu based on CSS sprites. I had to shrink the rather large image (3000x1500) before any of the sprites would display on the iPad.
87
IPAD doesn't like cover in background shorthand.
If you are using cover do it on a new line
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
