Background properties

Purpose

Specifies the background of an element; colors and images. You can also position the background, repeat it, and declare whether it should be fixed or scrolled.

Controls

Control Description Options Property
Attachment Specifies whether the background image is fixed or scrolls with the rest of the page. fixed, scroll  theme_background_prop.html#background-attachment
Color Specifies the background color of an element. transparent, <color>  theme_background_prop.html#background-color
Image Specifies an image or image policy to use as a background image for an element. Browse opens the Image Policy Selection dialog. none, <image_policy>, URI, mcs-gradient()  theme_background_prop.html#background-image
Repeat Specifies whether the background image should be repeated or not. repeat, repeat-x, repeat-y, no-repeat  theme_background_prop.html#background-repeat
Horizontal Sets the initial horizontal position for a repeat. center, left, right, <length>, <percentage> theme_background_prop.html#background-position
Vertical Sets the initial vertical position for a repeat. bottom, middle, top, <length>, <percentage>  theme_background_prop.html#background-position

Properties

background-attachment

Specifies whether the background image is fixed or scrolls with the rest of the page. The default value is 'scroll'.

Option Description
fixed The background image should be fixed.
scroll The background image should scroll with the page.
inherit The value of the property should be inherited from the parent element.
background-color

Specifies the background color of an element. The default value is 'transparent'.

Option Description
transparent Makes the selected element transparent.
<color> The background color represented by a color name or a hex code.
inherit Specifies that the background color should be inherited from the parent element.
background-image

Specifies the name of an image or image policy to use as a background image for an element. The default value is 'none'.

Option Description
none No background image will be displayed.
url('URI') The URI of the image to display.
mcs-component-url('URI') The URI of the image policy to use.
mcs-transcodable-url('URI') The URI of the image to display. The image will be transcoded, if necessary.
mcs-gradient() The gradient function defining the background for the element.
inherit The background image should be inherited from the parent element.
background-position

Initial position of the background image. The first value of the property specifies the horizontal position and the second value specifies the vertical position. If only one value is specified, the second value will be set to 'center'. The default value is '0% 0%'.

Option Description
center bottom, center center, center top, left bottom, left center, left top, right center, right bottom, right top Specifies the initial position of the image.
<length> Specifies the initial position of the image in length units.
<percentage> Specifies the initial position of the image as a percentage.
inherit The value of the property should be inherited from the parent element.
background-repeat

Specifies whether the background image should be repeated or not. The default value is 'repeat'.

Option Description
no-repeat The background image should not be repeated.
repeat The background image should be repeated both vertically and horizontally.
repeat-x The background image will be repeated horizontally.
repeat-y The background image will be repeated vertically.
inherit The value of the property should be inherited from the parent element. 
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs">
  <head>
    <title>Background properties</title>
    <style type="text/css">
      body {
        background-image: url('http://localhost:8080/mcs/welcome/images/logo_sys_r_rgb_150.gif');
        background-repeat: repeat-y;
        background-attachment: fixed;
        background-position: center top;
        background-color: #f3f3f3;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Antenna Software</h2>
      <div>
        <p>Antenna Software helps organizations solve the complexity of delivering the true mobile Internet
          to thousands of unique devices, without compromise, to the highest quality user
          experience, performance and reliability. Antenna Software is the world leader in Intelligent
          Content Delivery solutions.</p>
      </div>
    </div>
  </body>
</html>

Related topics