This discussion is archived
6 Replies Latest reply: Nov 16, 2012 7:23 AM by sect55 RSS

Expand the Background Image to Cover the Entire Region Title

sect55 Journeyer
Currently Being Moderated
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
  • 1. Re: Expand the Background Image to Cover the Entire Region Title
    fac586 Guru
    Currently Being Moderated
    sect55 wrote:

    I created the application on APEX.ORACLE.COM:
    Workspace: RGWORK
    User: TESTER
    Password: test123
    Application : CSRSR (33558)
    The account is locked.
  • 2. Re: Expand the Background Image to Cover the Entire Region Title
    sect55 Journeyer
    Currently Being Moderated
    The account is now unlocked.

    Robert
    http://apexjscss.blogspot.com
  • 3. Re: Expand the Background Image to Cover the Entire Region Title
    fac586 Guru
    Currently Being Moderated
    sect55 wrote:
    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%;
    }
    The page HTML Header CSS is not overriding the theme CSS because it comes before it in the cascade. To override the built-in CSS the rules must:

    <li>Come after the theme CSS is linked into the page
    or
    <li>Have selectors with a higher specificity
    or
    <li>Include an <tt>!important</tt> declaration

    There seems to be a lot of pointless repetition in the rules (and there are more rules in the page than you've shown above). They all contain <tt>float: left</tt> and <tt>width: 100%</tt> properties that make no difference because they already exist in the theme CSS.

    All that is actually needed to get the nameplate text and images visible on a repeating background image is:
    .rc-title img {
        vertical-align: middle;
    }
    .rounded-corner-region .rc-blue-top {
        background-repeat: repeat-y !important;
    }
    However, that doesn't actually produce what to my eyes is an acceptable result. The region title background images in this theme are simply not capable of being extended or repeated, as you can see from how the Nameplate NDC region title looks with a repeated background applied. To get this looking right you'll have to either get busy with an image editor and create taller or extendable versions of the background images, or replace the images with CSS3 borders and gradient backgrounds (if your browsers will support this).

    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.
  • 4. Re: Expand the Background Image to Cover the Entire Region Title
    sect55 Journeyer
    Currently Being Moderated
    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?

    Thank you,
    Robert
    http://apexjscss.blogspot.com
  • 5. Re: Expand the Background Image to Cover the Entire Region Title
    fac586 Guru
    Currently Being Moderated
    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;
    }
  • 6. Re: Expand the Background Image to Cover the Entire Region Title
    sect55 Journeyer
    Currently Being Moderated
    fac586,

    Thanks alot. I really appreciate it. It works great!

    I used the second option (Nameplate as content) since most of my users will be using IE7 which I don't believe suppors CSS3. IE7 is my company's standard browser. I don't see them going to IE9 or IE10 (that supports CSS3) anytime soon. A few users will be using Firefox (I don't know the version they have). So it is best I use the 2nd option.

    Thanks again,
    Robert
    http://apexjcss.blogspot.com

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points