Hello.
I am using Apex 4.0.1 and have a need to place a watermark (that is, a background image) over a report, both a "classic" type and Interactive Report.
I have two questions about this.
1) I've searched this Forum and found several good questions/responses about this subject. What I think is the most maintainable solution is to create a .css file and reference this file within the Template section of a copy of, say, the "Reports Region" template used by my application theme. And so, I made a copy of the "Reports Region" template and called it "Watermark Reports Region". I then created a very simple .css file called "bgimg.css" defined as:
#REGION_STATIC_ID# {
background-image: url(#WORKSPACE_IMAGES#menu_bug.png) !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
}
Note: For those that may not know, the "!important" clause is, in fact, a css defined clause used to tell the browser that it should give the associated option the highest precedence. This prevents my desired css option from being overridden by another css file. Frankly, I myself did not know this until after I saw it being used in several of the responses on this Forum and then read up about it.
I uploaded this css file via the Apex "Shared Components -> Cascading Style Sheets" option. I also made sure that menu_bug.png is, in fact, among my workspace images.
I also made sure that my "Watermark Reports Region" template contains the substitution variable "REGION_STATIC_ID" and that my actual report region has a value in the Region Static Id field.
Within my "Watermark Reports Region" template, I tried to reference my .css file. This is where I think my problem is.
I placed
<link rel="stylesheet" type="text/css" href="#WORKSPACE_IMAGES#bgimg.css" />
at the very top of the Template section in my "Watermark Reports Region" template.
I then assigned my template to my Apex report. When I run my report, I see nothing.
So, how does one reference this css file within the template?
=================================================
2) I tried using my css tags as an internal style by placing it within the "HTML Header" section of my application page. I used:
<style type="text/css">
#empreport {
background-image: url(#WORKSPACE_IMAGES#menu_bug.png) !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
}
</style>
I assigned a div tag to my report region header and footer that looks like:
In Header: <div id="empreport">
In Footer: </div>
When I run the report, I do get the image. But it is
surrounding the report. It looks like my report is "floating" in a sea of bug images.
So, how can I get these images to actually appear within the report itself. In other words, I want the report itself to be "transparent" so as to allow these images to be seen within the report body itself.
Thank you all for any help/advice/code example.
Elie