Expand the Background Image to Cover the Entire Region Title

Question

I have a region title that contains an image and it has a height of 2 rows but the background image (blue image) is not expanding in the area (the css contains repeat for the background). The application uses theme 2. Can someone help?
CSS:
.rc-title {
    background: url("../images/bg-region-blue-l.gif") repeat scroll 0 0 transparent;
    float: left;
    width: 100%;
div.rc-blue-top
    background: url("../images/bg-region-blue-l.gif") repeat scroll 0 0 transparent;
    float: left;
    width: 100%;
}I created the application on APEX.ORACLE.COM:
Workspace: RGWORK
User: TESTER
Password: test123
Application : CSRSR (33558)
Select Signage from the menu (only choice).
You will see that one of the tabular forms has Nameplates and an image, another tablular form has an image but no text (Nameplates) even though it is there. I would live the blue to cover both the image and the text.
Please help
DB: 10g
APEX 4.1
APEX 4.2 (APEX.ORACLE.COM) works the same way.
Robert
http://apexjscss.blogspot.com

Answer 1

sect55 wrote:
fac586 ,
I would like to try the second option:
>
Another option would be to eliminate the problem by moving the nameplate images out of the region titles. There's horizontal space within the regions that will allow these images to be positioned to the left of the tabular forms, which would look OK.
But how do I reference the horizontal space within the regions? I looked at the template for the region:
<div class="rounded-corner-region float-left-100pct" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="rc-blue-top"><div class="rc-blue-top-r">
<div class="rc-title">#TITLE#</div>
<div class="rc-buttons">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
</div></div>
<div class="rc-body"><div class="rc-body-r"><div class="rc-content-main">#BODY#<br />
</div></div></div>
<div class="rc-bottom"><div class="rc-bottom-r"></div></div>
</div>and couldn't find out to put the image in the horizontal space.
Can you please help me by providing the details? There are two options, depending on the role you see the nameplate images playing on the page. I've used the two regions to provide one example of each.
*1. Nameplate as eye-candy:* If there's sufficient information in the region title, region content and item labels to make the nameplate images superfluous in providing information to the user, and you're just using them to improve the appearance of the page, then they can be applied purely using CSS.
/* Nameplate image as CSS eye-candy */
#nameplates-ndc div[id$="catch"] {
  min-height: 36px;
  padding-left: 113px;
  background: transparent url(#WORKSPACE_IMAGES#nameplate_ndc.gif) top left no-repeat;
  background-size: 103px;
}Note the use of the CSS3 <tt>background-size</tt> property to resize the image. If the app has to run in browsers that don't support this then you'll have to drop it and create an image of the exact size required for use in the <tt>background</tt> rule.
*2. Nameplate as content:* If the nameplate images are necessary to provide information to the user, then they have to be included in the region (and they must have an <tt>alt</tt> attribute providing an alternative representation of the information contained in the image).
Put the image in the region Header:
<img src="#APP_IMAGES#nameplate_n.gif" width="103" alt="Nameplate (name only)" />and float it so it sits alongside the form:
/* Nameplate image as page content */
#nameplates-name .rc-content-main img {
  float: left;
  margin-right: 10px;
}