I want to achieve this: Table whith background image but cannot get it to work in an Apex page with HTML region.
Adding the following code to the html region:
<table class="tableWithBackground" width="300px" height="200px" border="1">
<img class="tableBackground" src="#APP_IMAGES#Demo.jpg">
<td>I am fine</td>
Results in a page with a table but without borders (at his stage I have not yet uploaded the Demo.jpg). After uploading the Demo.jpg results in a table with the entire image placed in het first cell. After placing the class code in the CSS inline property I expected to see the result as is shown in the Table whith background image demo. For some reason this does not work (the image is no longer visible).
Can anybody tell me how to achieve my goal?
This is a workaround. What's your real goal? Why do you want to do this?
I am developing an application a want to use for the field hockey team of my daughter. At all times (in a match) I want to know who is playing in which position. In order to do so I have created a Hockyfield picture (my backgroud image) . On top of this Hockeyfield a want to draw a borderless table. In specific cells I want to show the picture of the girl playing in that position. Wihtout being able to automatically resize the background hockeyfield, I get different views of the hockeyfield depending on the way I hold my tablet. Also displaying this page on my iPhone alters the hockeyfield. Some times I only see the left part of the hockeyfield and on an other devise, or chaning the way a hold the tablet, I see 2 hockeyfields next to each other.
Fortunately , the table and pictures of the girl is no problem. The table allways automatically alters to show what I want to see. It is only the background image that is not working like I want it to.
Saving the above code to a test.html on my computer and viewing this in the same browser as I am using for viewing the Apex page, works fine. I do not think I has anything to do with the browser verion.
After experimenting extensively I found that changing the display position of the HTML region to "After Header" the page renders as I want it to. But unfortunately this is an undesired position. Digging into the code of the page and the templates it uses, I found that the #TEMPLATE_CSS# substitution code that inserts the
<link rel="stylesheet" href="/i/themes/theme_25/css/4_2.css?v=4.2.3.00.07" type="text/css" />
<link rel="stylesheet" href="/i/themes/theme_25/css/responsive_grid.css?v=4.2.3.00.07" type="text/css" />
lines into to generated code is most likely causing the problem. This code somehow disables/deactivates the tableBackground class I want to be executed.
Can somebody help me resolve this issue?
The best way to get help is to create an example on apex.oracle.com.
By recreating an example of my problem in a new Workspace (on Apex.oracle.com) I found that the problem no longer exists in the newly created workspace. The workspace I was using was imported from a workspace generated on my laptop with probably an older version of Apex (have not verified that yet). I am going to rebuild my application in the new workspace and I am confident that the problem no longer will arise.
Thank you for your help!