Images appearing blank in Android webview due to CSS background loading issue

Hello everyone! I'm having an issue with loading a web url where everything is working fine except for loading background images.

I came across this page:

android css background-image not found

But my question is slightly different. I don't want a background for the entire page body. Instead, I need to display a background image for a specific div.

Here is a snippet of my HTML:

<a href="#WomenMonth"><li data-menuanchor="firstPage" class="manavatarchoose"> test </li> </a>

And here is the CSS code for the div:

.manavatarchoose{
width:206px;
height:206px;float:left;
background-image: url("http://www.example.com/demo/android_connect/assets/img/maleorfe.jpg") ; border-radius:150px;    list-style-type: none; vertical-align:middle; 
}

Additionally, here is my Java class:

WebView myWebView = (WebView) rootView.findViewById(R.id.webView1);
    myWebView.loadUrl("http://www.example.com/demo/android_connect/get_webmob.php");
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

I have also tried using absolute paths for images in the CSS file.

It's worth mentioning that the HTML page displays correctly in the browser, but when loaded within the app, some images and certain stylesheet attributes are not showing up. Any help would be greatly appreciated!

javascriptandroidjqueryhtmlcss

Answer №1

Starting from Android version 3.0, CSS has been supported in Webview. It is important to check that your device runs on a version higher than Android 3.0 to utilize CSS animations effectively on Android devices. However, there was a known issue with animating multiple properties simultaneously on devices running Android 3.0 and above, causing the entire element to disappear during the animation. This issue was resolved in Android 4.4 Kitkat, which switched to using the Chromium engine, enabling full support for CSS3 and HTML5.

htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + htmlData;

In order to load CSS files from the assets directory in Webview, it is recommended to use the method WebView.loadDataWithBaseURL as shown in the code snippet above. By setting the base URL to "file:///android_asset/", the WebView will be able to locate and apply the styles from the css-files in the assets directory effectively.

Best of luck with your implementation!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Presentation: Troubleshooting Ineffective CSS3 Transitions

I have created a basic slideshow that can accommodate multiple images. Clicking on an image should move to the next slide, and once the last image is clicked, it should loop back to the first slide. The functionality of transitioning between slides seems ...

javascripthtmlcss

Creating captchas seems like a mistake in reasoning to me

I am encountering an issue with my code. I created a basic newbie-level captcha using Javascript. Below is the code snippet: <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>T ...

javascript

What is the best way to incorporate items into Redux reducers?

Incorporating Redux with Next JS, I am faced with the challenge of adding an array of objects to it. Within my application, there exists a form containing multiple inputs, and in order to accommodate these inputs, I have structured a form consisting of 10 ...

javascriptreactjsreduxnext.jsreact-redux

Sending numerous arguments to getStaticPaths() in nextjs

I am looking to create two different routes: /midterm/cs611 /finalterm/cs611 My goal is to display distinct content when accessing the /midterm/cs611 endpoint, and different content when accessing the /finalterm/cs611 endpoint. However, I am running into ...

javascriptnext.js

The removal of an item from the list fragment is experiencing issues and is not functioning

I am currently working on a simple android app to explore sqlite. The app features a listfragment that displays various products along with their prices like this: Pencil 1 Pen 1.20 ... Users can click on an item in the list to delete it. I am u ...

androidsqlite

Switch the dropdown menu to a button if it consists of only one option

I have been using a database within the Moodle Learning Management System that generates a bootstrap table. Here is an example of what it looks like: https://i.sstatic.net/UJc4M.png The last row in the table contains a dropdown menu. When viewing your ow ...

javascripthtmlcsstwitter-bootstrap

Combine all the HTML, JavaScript, and CSS files into a single index.html file

So here's the situation - I am utilizing a C# console application to convert four XML files into an HTML document. This particular document will be circulated among a specific group of individuals and is not intended to be hosted or used as a web app; ...

javascriptc#htmlcsswebpack

Incorporate a fontawesome icon into a dynamically created button using ajax

Is it possible to insert fontawesome icons into a button created using this code snippet? $.each(response, function (i, item) { trHTML += '<tr><td>' + item.name + '</td><td>' + "<input type='button&apo ...

javascriptjqueryhtmlajaxbutton

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

javascriptcssvue.jscss-positionvuex

Animating a camera along a predefined path in A-Frame to maintain focus on a subject

I have been experimenting with animating a camera using the alongpath component, but I am struggling to keep the camera focused on a target. Despite trying both orbit-controls and look-at components, I can't seem to get them to work properly. It seems ...

javascriptthree.jsaframe

Combining arrays of objects in JavaScript

I am currently working on combining different arrays: const info1 = {id: 1} const info2 = {id: 2} const info3 = {id: 3} const array1 = [info1, info2] const array2 = [info1, info3] const array3 = [info2, info3] const union = [...new Set([...array1, ...arr ...

javascriptnode.js

Encountering a Javascript error while trying to optimize bundling operations

After bundling my JavaScript with the .net setting BundleTable.EnableOptimizations = true;, I've encountered a peculiar issue. Here's the snippet of the generated code causing the error (simplified): var somVar = new b({ searchUrl: "/so ...

javascriptc#typescriptbundling-and-minification

The .SVC file's generated Javascript proxy URL fails to function properly when used with SSL

The ASP.Net web site I have deployed in IIS 7.5 includes a file named Cart.svc, which is used for accessing JavaScript from the browser. While the JavaScript functions fine without SSL, enabling SSL causes it to stop working. Interestingly, removing the / ...

asp.netjavascriptwcf

Using VueJs, create a dynamic css class name to be applied inline

Can VueJs handle a scenario like this? Html: <div class="someStaticClass {{someDynamicClass}}">...</div> JS: var app = new Vue({ data: { someDynamicClass: 'myClassName' }, mounted: function() { ...

javascriptvue.js

Switching between videos can lead to an undesired bouncing effect on

Whenever I switch between my video thumbnails, there seems to be a slight bounce as the new video loads. To better understand this issue, check out this video: . <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

htmlcsshtml5-video

In CSS, Internet Explorer fails to recognize the margin-bottom property of the last div

I have a container with three divs: header, content, and footer, set up in a standard application format. Here is the structure: <body> <div> <div id="ROOT" > <div id="ROOT_0" > Header ...

cssinternet-explorermargin

What are some ways to prevent pinch zoom on an HTML webpage?

Searching for a way to disable pinch-to-zoom on an HTML web page has proven to be a daunting task. Despite numerous attempts, I have yet to find a solution that works. I am reaching out in the hopes that you may have the answer. Some of the methods I have ...

htmlcssreactjsnext.js

Fixing the error: "React-dom.development.js:4091 Uncaught TypeError: onItemSelect is not a valid function"

Every time I change the option in the selector, I keep encountering this error: "react-dom.development.js:4091 Uncaught TypeError: onItemSelect is not a function" :( import React from "react"; import Product from "./Product" ...

javascriptreactjserror-handling

Retrieve the name of the selected checkbox

Currently, I am working on a page where check boxes are generated dynamically. Every time a user clicks on any of the check boxes, the following event is triggered: $(':checkbox').click(function() { }); I would like to know how I can retrieve ...

asp.netjavascriptjquery

identify when the bottom of a container is reached during scrolling through a window

On my website, I have a section with products displayed in the center of an HTML page. I am looking to implement an AJAX call that will load additional products when the user reaches the bottom of this product container by scrolling down. How can I detec ...

javascripthtmljqueryajax