I am facing an issue while trying to showcase a background image from an HTML document in a UIWebView. Interestingly, the image appears perfectly with text overlay when I preview it on the iOS Simulator or Google Chrome. However, when testing it on my actual iPhone, the text displays but the background image does not show up.
My approach involves using Swift code to load the HTML document into the WebView:
webView.loadRequest(NSURLRequest(URL: NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource(htmlCodeFilename, ofType: "html")!)!))The structure of my HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img.png");
background-size: 425px 640px;
font-size: 130%;
}
</style>
</head>
<body>
<p>One evening as the sun went down</p>
</body>
</html>
When running the code, I can see that the font size increases on the device, indicating that the <style> tag is being acknowledged. Strangely, even after removing the image file from the project, the background image persists when viewed through the Simulator. Only by intentionally altering the filename in the CSS (e.g. background-image: url("ig.png");) does the image vanish from the Simulator display.
If you have any insights on how to resolve this issue and get the image to display properly on the device, your assistance would be greatly appreciated.
Thank you in advance!