How To Use a css File To Watermark A Report

Question

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

Answer 1

Elie
Thanks for taking the time to post sufficient information to understand the problem. In future if you're going to such efforts you might want to use them to reproduce the problem on apex.oracle.com, which means you can share actual working (or more likely not working!) code. Please also always wrap code posted on the forum in tags<tt>\...\</tt> tags to preserve formatting and special characters.
>
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.
>
According to the relevant HTML 4.01 and XHTML 1.x standards, <tt>style</tt> and <tt>link rel="stylesheet"</tt> elements should only appear within the <tt>head</tt> element of a document.
This changes in HTML5. The new <tt>scoped</tt> attribute allows <tt>style</tt> to be used in a prescribed way elsewhere in the document, with the effect that the styling rules specified are only to be applied to the other descendant elements of that <tt>style</tt> element's parent (in the way you're trying to do here). I'd expect <tt>link</tt> with a <tt>rel="stylesheet"</tt> to remain restricted to <tt>head</tt> content in HTML5: off the top of my head I can't see a use case for referencing external stylesheets in a non-metadata context.
That said, current browsers apply CSS regardless of where in the document it appears, and future HTML5-compliant ones will continue to continue to do so for backwards compatibility. For myself, when using XHTML 1.0 I'll continue to follow the only put <tt>style</tt> and <tt>link</tt> elements in the page <tt>head</tt>. When I get round to using HTML5 for real I'll follow the standards for that as well.
I strongly recommend that you follow the standards and only put <tt>link rel="stylesheet"</tt> elements in the page <tt>head</tt>.
>
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.
>
Use <tt>!important</tt> only where it's actually needed. It's over-represented in this forum because Oracle changed the order of style sheet inclusion in APEX 4.0 and made it more difficult to override theme styles using CSS in the page HTML Header without modifying page templates.
Try your styles initially without using <tt>!important</tt>, and also consider using the cascade to provide any necessary overrides by including your CSS after other style sheets.
>
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;
I then assigned my template to my Apex report. When I run my report, I see nothing.
>
Because <tt>#WORKSPACE_IMAGES#</tt> is not substituted in external CSS files: +{thread:id=986329}+
If possible it's much better to locate image, CSS and JavaScript files externally on the file system. Otherwise you'll have to use the workaround suggested in that thread and include a <tt>style</tt> element in the page templates to specify the background image.
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.Reports are descendants of their region containers and may be subject to additional built-in or theme styles that overrides that specified for the region. Your CSS selector has to specify the report element, not the entire region.
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.I'd use a <tt>class</tt> attribute in the region template: this removes the need to use the <tt>#REGION_STATIC_ID#</tt> selector, and allows the CSS to go in the page <tt>head</tt> where it belongs. Add <tt>watermark-report-region</tt> in addition to any existing <tt>class</tt> values in the region template:
<div class="borderless-region watermark-report-region" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
  <div class="bl-body">#BODY#</div>
</div>You may have to inspect the page source (use a web inspector like that found in Safari, or the Firefox+Firebug combo) to figure out what has to be overridden in the theme/templates you're using. This worked for an Interactive Report using theme 17:
.watermark-report-region .apexir_WORKSHEET_DATA {
  background: #fff url(/i/menu/blank_app_32.gif);
.watermark-report-region .apexir_WORKSHEET_DATA tr.even td,
.watermark-report-region .apexir_WORKSHEET_DATA tr.odd td {
  background-color: transparent;
}For a standard report you'll need to identify the selector required for the actual report element (equivalent to the <tt>apexir_WORKSHEET_DATA</tt> table) using the web inspector or from the report template. It would be a good idea to create standard report template(s) incorporating a <tt>watermark-report</tt> class on the report table to provide a simple selector for such reports.