Geek Answers Handbook

CSS photos not showing on ipad

I am completely confused and wonder if I just missed something simple, but I cannot display the background image on the ipad or in 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 also output the image directly above the div block. In chrome, they both appear, but they do not do this in the ipad simulator. Any ideas?

+6
css
source share
6 answers

I have not tested them, but I have a few ideas that you should check:

1) How are files placed on the iPad's “local drive”? you don’t have HTTP, so I assume you have an image on your hard disk (RAM) - try opening the file directly in the browser, does it show / load?

2) Try adding: "display: block;" to your CSS rendering. Could do the trick

3) IMG tag, try adding width and height, will something change?

4) What type of PNG file are you using? 8-bit or 24-bit?

5) What happens if you use GIF or JPG?

6) when using background images. Try using a long format for the attributes .. "Background image: URL (image.jpg);"

7) Also try adding <!DOCTYPE html> so that the browser goes into HTML5 mode.

0
source share

This may be due to the size 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 compress a rather large image (3000x1500) before any of the sprites appeared on the iPad.

+27
source share

IPad doesn't like cover in background reduction. If you use a cover, do it on a new line.

  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
+3
source share

Make sure you have valid CSS! http://jigsaw.w3.org/css-validator/

I ran into this problem before and fixing / fixing my CSS fixed!

0
source share

In some mobile theme settings, you will find "reduce large images in messages or pages to fit smaller screens." check it on / off. And unplug it.

Hope this solves your problem.

0
source share

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")

-3
source share

More articles:


All Articles