Background and foreground image extended attributes

1. back/foreground-repeat attributes

1. no-repeat

Image given by ****ground-image attribute is rendered once and without any scaling. Following attributes describe details of this mode:

• ****ground-position-left: left offset of the image from the left of padding box of the element.
• ****ground-position-top: top offset of the image from the top of padding box of the element.
• ****ground-position-right: right offset of the image from the right of padding box of the element. If both right and left offsets are defined left offset value is ignored.
• ****ground-position-bottom: bottom offset of the image from the bottom of padding box of the element. If both top and bottom offsets are defined top offset value is ignored.

2. repeat

Image given by ****ground-image attribute is rendered repeatedly filling (tiling) area inside border box of the element.

• ****ground-attachment scroll | fixed; determines if it is fixed with regard to the canvas or if it scrolls along with the content.
• ****ground-position-left, ****ground-position-top, ****ground-position-right and ****ground-position-bottom define initial offset of the image tiling.

3. repeat-x

Image is repeated horizontally.

• ****ground-position-left or ****ground-position-right define offset of image tiling.
• ****ground-position-top or ****ground-position-bottom define vertical position of image "stripe"

4. repeat-y

Image is repeated vertically.

• ****ground-position-left or ****ground-position-right define horizontal pozition of image "stripe".
• ****ground-position-top or ****ground-position-bottom define vertical offset of image tiling.

5. expand

Image is drawn with expansion of nine sections of the image:



• ****ground-position-left: left offset of the image middle section from the left of padding box of the element.
• ****ground-position-top: top offset of the image middle section from the top of padding box of the element.
• ****ground-position-right: right offset of the image middle section from the right of padding box of the element. If both right and left offsets are defined left offset value is ignored.
• ****ground-position-bottom: bottom offset of the image middle section from the bottom of padding box of the element. If both top and bottom offsets are defined top offset value is ignored.

back/foreground-repeat: expand mode accepts additional modifiers: stretch-top, stretch-bottom, stretch-left, stretch-right and stretch-middle. These modifers tell how to render correspndent section on the destination. By default tiling is used. With the modifier correspondent section will be stretched.

6. stretch

Image is stretched inside padding area of the element minus offsets:



• ****ground-position-left: left offset of the image from the left of padding box of the element.
• ****ground-position-top: top offset of the image from the top of padding box of the element.
• ****ground-position-right: right offset of the image from the right of padding box of the element.
• ****ground-position-bottom: bottom offset of the image from the bottom of padding box of the element.

2. back/foreground-image-transformation

back/foreground-image-transformation defines pixel level transformation that enfgine should do before rendering the image. This attribute accepts following values:

• contrast-brightness-gamma( contrast = 0.0 .. 1.0, brightness = 0.0 .. 1.0, gamma )

function that define contrast, brightness and/or gamma color transformations.
Sample:

img:hover
{
  foreground-image-transformation: contrast-brightness-gamma(0.5,0,0.5,1.2);
}

button
{
  background-image-transformation: color-schema(system);
}