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?

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.

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?

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:

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.

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:

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:

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.

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).

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.