This panel of the the Style Editor enables you to set CSS declarations for the background of a JavaServer Faces component. The background is the surface on which the contents of the component are displayed, such as black text on a white background in an Output Text component. The declarations you add to the style property override corresponding rules defined in the page's CSS file.
The Background panel enables you to set the following style declarations:
- Background Color. Sets the CSS property background-color. You can:
- Choose one of the standard colors from the drop-down list.
- Click the color button
on
the right side of the field and pick a color.
- Enter a hexadecimal RGB color value prefixed with a hash mark (#)
or use the decimal notation rgb(red-value,green-value,blue-value).
For example, the value for white is rgb(255,255,255).
The following table shows the standard colors:
Color names and sRGB values black = "#000000" green = "#008000" silver = "#C0C0C0" lime = "#00FF00" gray = "#808080" olive = "#808000" white = "#FFFFFF" yellow = "#FFFF00" maroon = "#800000" navy = "#000080" red = "#FF0000" blue = "#0000FF" purple = "#800080" teal = "#008080" fuchsia = "#FF00FF" aqua = "#00FFFF"
- Choose one of the standard colors from the drop-down list.
- Background Image. Sets the CSS property background-image,
an
image to be used as the background for the component. You can type in a
URL to an image on a web site, or you can use the ellipsis button and navigate
to an image file. If you navigate to an image file, it is automatically added
to your project's resources directory, and the reference becomes resources/image-file.
- Tile. Sets the CSS property background-repeat, which specifies
whether a background image appears once or is repeated in various ways, as
follows:
- repeat. The image is tiled, or repeated, until it covers
the entire background.
- repeat-x. The image is repeated in a row that spans the width
of the background, by default across the top of the image or in whatever
position you set with Vertical Position.
- repeat-y. The image is repeated in a column that spans
the height of the background, by default on the left side of the image
or in whatever position you set with Horizontal Position.
- no-repeat. The image is not repeated, but appears in its initial
location (top left corner or whatever you set with Horizontal Position
and Vertical Position).
- repeat. The image is tiled, or repeated, until it covers
the entire background.
- Scroll. Sets the CSS property background-attachment, which
specifies whether a background image is fixed or moveable, as described below:
- scroll. This default setting causes the image to scroll with
the content of the component. In other words, the background image is
attached to the content and moves along with it if the user scrolls the
content.
- fixed. This setting causes the image to be fixed and not move
if the content moves. In other words, the background image is
not attached to the content and does not move along with it if the user
scrolls the content. For example, a watermark for the page background
might be set to fixed so it will remain visible as the page scrolls.
- scroll. This default setting causes the image to scroll with
the content of the component. In other words, the background image is
attached to the content and moves along with it if the user scrolls the
content.
- Horizontal Position. Sets the horizontal component of the CSS property background-position,
which you can use to specify the initial location of the image. You can choose
a value from the drop-down list (left, center, or right) or you can specify
an absolute position (such as 20 px) or a relative position (such as 20%).
Numeric positions are measured from the left side of the component.
- Vertical Position. Sets the vertical component of the CSS property background-position,
which you can use to specify the initial location of the image. You can choose
a value from the drop-down list (top, center, or bottom) or you can specify
an absolute position (such as 20 px) or a relative position (such as 20%).
Numeric positions are measured from the top of the component.
- Note: The first time you enter a numeric value in either of the Position fields, press Enter to enable the drop-down list showing the units of measure.
Close