====================================== Images as backgrounds and fills - PD ====================================== Images are also supported on the backgrounds of block level components (see :doc:`component_positioning`), and of fills for shapes, text, etc. .. code-block:: xml

Background image with the default settings

.. image:: images/drawingImagesBackgrounds.png The background has been drawn with the image repeating from the top left corner at its natural size (or default 96ppi), clipped to the boundary of the container. Along with specifying the image background, there are various other options for how the pattern is laid out that will change the defaults of how the image repeats. Background Size ----------------- The background size option can either be a specific size, or 'cover' which will cover the entire container as a single image. (Scryber does not currently support 'contain' but it's on our roadmap). .. code-block:: html

Background image with explicit size

Background image with cover

.. image:: images/drawingImagesBackgroundSize.png Background Repeat ------------------- The options for the background repeating are: * repeat - The default value, where the image repeats both X and Y directions. * repeat-x - The background will only repeat in the X (horizontal) direction. * repeat-y - The background will only repeat in the Y (vertical) direction. * none - The background will only be shown once. These can be applied with a size, but will not affect anything if the size is cover. .. code-block:: html

Background image with the default repeat

Background image with repeat horizontal

Background image with repeat vertical

Background image with no repeating

.. image:: images/drawingImagesBackgroundRepeat.png Background Position --------------------------- * The starting position of the pattern. * x-pos - Determines the horizontal offset of the rendered background image in units. * y-pos - Determines the vertical offset of the rendered background image in units. * The pattern repeat step. * x-step - Sets the horizontal offset between repeating patterns, which can be more or less than the size of the rendered image. * y-step - Sets the vertical offset between repeating patterns, which can be more or less than the size of the rendered image. .. code-block:: xml

Background image with the default repeat at 20,20

Background image with repeat horizontal at 20,20

Background image with repeat vertical at 20,20

Background image with no repeating at 150,100 and background color

.. image:: images/drawingImagesBackgroundPosition.png Images as fills ------------------- Scryber also supports images as fills. See the SVG documentation for this.