CSS background images not showing on the ipad
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 the开发者_如何学JAVAy both appear but in the ipad simulator neither do. Any ideas?
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.
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;
I haven't tests these, but I have a few ideas you should test:
1) How are the files placed on a "local drive" of an iPad? you don't have any HTTP, so I assume you have the image on the "harddrive" (RAM) - try to open the file directly in the browser, does it show/download?
2) Try to add: "display:block;" to your CSS rendering. Might do the trick
3) The IMG tag, try adding width and height, does it change anything?
4) What type of PNG file are you using? 8-bit or 24-bit?
5) What happens if you use a GIF or JPG instead?
6) when using background images. Try using the long format for the attributes. "background-image:url(image.jpg);".
7) Also try adding a <!DOCTYPE html> so the browser goes into HTML5 mode.
Make sure you have valid CSS! http://jigsaw.w3.org/css-validator/
I've run into this issue before and validating/fixing my CSS fixed it!
In some mobile theme setting you will find "shrink large images within posts or pages to fit on smaller screens. " check for enable/disable it. And disable it..
Hope this will solve your problem.
always put quotes around your url and either the full url("http://example.com/folder/file.htm") or at least the slash url("/file.htm")
加载中,请稍侯......
精彩评论