How to change the background of the Edge browser control in Access 2024

Hello,

Here are my latest tests regarding changing the background of the Edge browser control in Access LTSC 2024.

Due to the poor image quality displayed in reports, my primary goal was to be able to display images of acceptable quality in a report preview using the Edge browser control.

During testing, I noticed that the background color of the control was black and that it was not possible to change it via a property.

For testing purposes, a 120KB image is used.

The image filename is stored in a table.

Reports in Preview Mode

The browser control in reports presents some problems.

1. In a report, it is impossible to modify the control's source property.
2. Using document loading methods such as 'Navigate' and 'ExecuteJavaScript' crashes Access.
3. Access misinterprets the concatenation of the browser control's source property value. For example, adding the application path to the image path.

Since VBA methods for loading HTML documents are prescribed, an HTML document is created and saved, for example, in the report's 'Load' event, with the desired image and background color.

The HTML document is loaded from the source control value that contains the path.

To work around the problem of misinterpreting the concatenation of the source control value, I used a query with a calculated field that concatenates the HTML file name and the current Access application folder.

This calculated field is the value of the browser control's source control.

Forms

Four solutions were considered for forms.

1. Image Hiding Solution

The image is loaded from the source control value containing the path.

The browser control is hidden by reducing its size.

The document's background color is then changed using the 'ExecuteJavaScript' method.

The browser control's size is then increased.

Note: We use the reduced size rather than the 'Visible' property of the browser control to be hidden because if Visible=False, the image is not loaded.

2. HTML Document Creation Solution

Using VBA code, we create an HTML file containing the desired background color and the image.

The image path must be preceded by the security prefix.

The HTML file is then loaded into the browser control using the 'Navigate' method.

3. CSS Style Creation Solution

Using VBA code, the image is transformed into a base64 binary array.

A CSS style is then created to define the design and visual presentation of a web page that includes the image file transformed into a binary array with the desired background color.

The 'ExecuteJavascript' method executes JavaScript within the browser control.

Note: This approach avoids the need to manage security prefixes.

Since no physical file is called by the browser, the code works universally across all versions of the application.

4. Solution Using a Default HTML Document

Using VBA code and the 'Navigate' method, an HTML file with a white background and no image is first loaded. Next, using the 'ExecuteJavaScript' method, we modify the backgroundColor element to define the desired background color and the img element to insert the image.

In conclusion:

For display purposes, creating a style (CSS) with the image as a binary array is the fastest solution.

The masking solution is the slowest.

You will find the various forms and the test report in the attached file.
Due to site restrictions, you must rename the TestNvEdge.txt file to TestNvEdge.zip in order to use it.

Yours sincerely.

TestNvEdge.txt

Hello,

After various searches and attempts, I finally have a solution.

My first approach was to assign the browser's source control to a field containing the image prefix followed by the image path.

In the VBA code, I hid the control using its size, and after the document fully loaded, I changed the background color using the ExecuteJavascrip method and restored the control's size.

A few observations:

I tried concatenating the prefix and the image path in the browser's source control. The value interpreted and displayed in the 'Insert Hyperlink' window is incorrect.

The prefix is added twice, and the whole thing is enclosed in quotation marks.

So I used a table field where I add the prefix to the image path.

Using the Visible property to hide and then show the browser control doesn't work.

When the visible=false property, the document is not loaded in the control.

My second solution, using VBA, was to create an HTML document with the desired background color and insert the image into it.

This document is saved in a directory.

It is then loaded in the browser.

This is the only solution I found to bypass the browser control's security with the image.

After testing, the second solution is the fastest in terms of display.

You can perform tests using the attached database.
I've attached the TestNvEdge.txt file, which is the compressed file of my test database.

I had to use the ".txt" extension due to the site's attachment restrictions.

You need to change the extension of the TestNvEdge.txt file to TestNvEdge.zip to use it.

Simply adjust the image paths in the table.

For the 'MyImageWeb' field, you must leave the prefix before the image path.

In the form's VBA code, you can adjust the variable Const tempHtmlPath As String = "D:\Documents\Tempo\access_edge_viewer.html", which defines the HTML document created by VBA.

Yours sincerely.

My compressed test database:
TestNvEdge.txt

Hello @jacky Perpète

I recommend referring to the AI response first, as it already provides a useful explanation and is quite aligned with my understanding of the issue.

However, I also spent some time testing different approaches (including rendering custom HTML, injecting content via VBA), and in my experience these methods are not consistently reliable. In many cases, they still result in a gray or blank area instead of displaying the image.

Because of this, it appears to be an expected behavior, since the Edge Browser Control does not expose any property to control its internal background, and its behavior depends heavily on how the embedded Edge engine renders the content. As a result, based on my testing, there may currently be no reliable way to remove the empty gray/black space, at least using the approaches I have tried.

I understand this may not be the answer you were looking for, but I hope sharing these findings helps clarify the current behavior. If anyone else has found a more reliable approach, it would be great to learn from that as well.

Thank you for your understanding.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.