Background Color:
 
Background Pattern:
Reset
Search
Home Recent Changes Show All Pages

Repeating Background and Fill images

Not Rated Yet

Images are not just components, they can also be used as backgrounds or fills to any component or even text. They can be also be repeated, spaced and scaled within the confines of the boundaries.

 

Article Contents

 

Fill and Background Images

 

The Background Style Item and Fill Style Item have colour, opacity and also image options available for use. In fact there are a lot of image options allowing complete control of the output. And you can use any supported image types, including masked or semi-transparent images

All the example in this document use a single repeating brick image - taken from http://silviahartmann.com/background-tile-art/12-old-stone-background.php (thank you StarFields)

 


 

Adding a Page Background

 

Perhaps the simplest background image option is just setting the Background img-src value on a page. The default values will be used, so the image will repeat horizontally and vertically offset by the natural size of the image.

 

    <pdf:Page id="SimpleRepeat" outline-title="Simple Page Repeat" >
      <Style>
        <style:Background img-src="../../images/wall-repeating-background.jpg"/>
        <style:Font family="Times New Roman" bold="true" size="60pt" />
        <style:Fill color="white"/>
        <style:Stroke color="black" width="1pt"/>
      </Style>
      <Content>
        <pdf:Label style:x="40pt" style:y="150pt" >Background Images</pdf:Label>
      </Content>
    </pdf:Page>

 


 

Section Backgrounds and new pages

 

If we were to use a section, and overflow onto a new page, then that background would also repeat onto the next page

 

    <pdf:Section id="DualRepeat" outline-title="Dual Page Repeat" >
      <Style>
        <style:Background img-src="../../images/wall-repeating-background.jpg"/>
        <style:Font family="Times New Roman" bold="true" size="60pt" />
        <style:Fill color="white"/>
        <style:Stroke color="black" width="1pt"/>
      </Style>
      <Content>
        <pdf:Label style:x="40pt" style:y="150pt" >Background Images</pdf:Label>
        <pdf:PageBreak/>
        <pdf:Label style:x="30pt" style:y="150pt" >And on the 2nd Page</pdf:Label>
      </Content>
    </pdf:Section>

 


 

Panel Background and styles

 

Background images are not just supported on pages, they can also be applied to any Block level container component - Panel, Div, Para, Pre, Span

 

    <pdf:Section id="PanelRepeat" outline-title="Panel Repeat" visible="false" >
      <Style>
        <style:Font family="Times New Roman" bold="true" size="60pt" />
        <style:Fill color="white"/>
        <style:Stroke color="black" width="1pt"/>
      </Style>
      <Content>
        <pdf:Div style:bg-image="../../images/wall-repeating-background.jpg" 
                 style:margins="100 0 0 0" style:padding="50" style:h-align="Center" >
          <pdf:Label >Background Images</pdf:Label>
        </pdf:Div>
      </Content>
    </pdf:Section>

 


 

The inline style attributes include the @bg-image and @bg-repeat options as a courtesy, but more options are available if we use the style definitions and applied values.

 

<Styles>

  <style:Style applied-class="title">
    <style:Font family="Times New Roman" bold="true" size="60pt" />
    <style:Fill color="white"/>
    <style:Stroke color="black" width="1pt"/>
  </style:Style>

  <style:Style applied-class="bgimg" >
    <style:Background img-src="../../images/wall-repeating-background.jpg" />
    <style:Margins top="100"/>
    <style:Padding all="50"/>
    <style:Position h-align="Center"/>
  </style:Style>

</Styles>
<Pages>

  <pdf:Section id="PanelStyledRepeat" outline-title="Panel Styled Repeat" >
    <Content>
      <pdf:Div style:class="bgimg" >
        <pdf:Label style:class="title" >Background Images</pdf:Label>
      </pdf:Div>
    </Content>
  </pdf:Section>

The output for this example is exactly the same as the previous Panel Background. It is just cleaner and more flexible

 

Extra style attributes

 

With our background now in a style definition, we can alter the output by using some of the more esoteric attributes.

Style
The @style attribute controls the use of any background. None will never have a background rendered (even if other options are set). Color will always try to use the @color specified (even if there is an image). And Image will use the image source specified.
If the @style is not set, then it will be inferred based on the following rules - If an img-src is specified it will be used, otherwise if there is a color then this will be used, otherwise no background will be used
Repeating
The @repeat attribute controls how multiple version of the image are used. None for only one image, RepeatX will only have a horizontally repeating image, RepeatY will only have a vertically repeating image, and the default is RepeatBoth for a full grid repeat.
Size
The @x-size and @y-size can adjust the rendered width and height of the each individual background image. If only one is specified the image is scaled proportionally in the other direction
Space
The @x-step and @y-step can adjust the rendered distance between each repeating image. If only one is specified, then the other will be the natural size of the image or the specified size in the appropriate attribute.
Position
The @x-pos and @y-pos can adjust the rendered width and height of the each individual background image. The default values are 0,0 for top left. Offsets are positive in the left -> right and top -> bottom direction, and negative values are supported.

 

Altering the size of the background

 

Our size attribute can control the rendered output dimensions of the repeating image. This does not alter any of the pixel data, or quality of the image. It will simply adjust the output dimensions. If only one of the x-size or y-size attributes is specified, then the other dimension will be calculated to proportionally scale without distorting the result. E.g...

Native width 50mm
Native height 100mm
Explicit x-size 25mm (50%)
Calculated y-size 50mm (50%)

In this example we also set the repeat for horizontal only so that there will be only one row of images.

 

    <style:Style applied-class="bgimgscaled" >
      <style:Background img-src="../../images/wall-repeating-background.jpg"
                        x-size="100pt" repeat="RepeatX"/>
      <style:Margins top="100"/>
      <style:Padding all="50"/>
      <style:Position h-align="Center"/>
    </style:Style>
.
.
.

    <pdf:Section id="PanelScaledRepeat" outline-title="Panel Scaled Repeat X" >
      <Content>
        <pdf:Div style:class="bgimgscaled" >
          <pdf:Label style:class="title" >Background Images</pdf:Label>
        </pdf:Div>
      </Content>
    </pdf:Section>

 


 

Altering the spacing and offset of the background

 

Our @x-step and @y-step attributes can independently control the distance between the start of one image and the start of the next. It is the full distance (not the size of the gap) that is specified.
We are also altering disproportionately the height of the repeating image.

 

    <style:Style applied-class="bgimgspaced" >
      <style:Background img-src="../../images/wall-repeating-background.jpg"
                         x-size="100pt" x-step="120pt" y-size="50pt" 
                         y-step="60pt" repeat="RepeatBoth"/>
      <style:Margins top="100"/>
      <style:Padding all="50"/>
      <style:Position h-align="Center"/>
    </style:Style>
.
.
.

    <pdf:Section id="PanelScaledRepeat" outline-title="Panel Scaled Repeat X" >
      <Content>
        <pdf:Div style:class="bgimgspaced" >
          <pdf:Label style:class="title" >Background Images</pdf:Label>
        </pdf:Div>
      </Content>
    </pdf:Section>

 

Repeating fills in text and shapes

 

Using repeating images as a background to a panel or page is really handy, but scryber also supports the use of repeating images as fills to text and shapes. Here we are creating new styles that override some of the previous values and applying multiple styles to the Div and Label components.

 

    <style:Style applied-class="fillimg" >
      <style:Fill img-src="../../images/wall-repeating-background.jpg"
                        x-size="100pt" repeat="RepeatBoth"/>
    </style:Style>

    <style:Style applied-class="no-bg" >
      <style:Background style="None"/>
      <style:Border color="black" width="2pt"/>
    </style:Style>
.
.
.

    <pdf:Section id="PanelFilledRepeat" outline-title="Panel Filled Repeat" >
      <Content>
        <pdf:Div style:class="bgimg no-bg" >
          <pdf:Label style:class="title fillimg" >Background Images</pdf:Label>

        </pdf:Div>
      </Content>
    </pdf:Section>

 


 

See Also



  Rating
Rate This Page: Poor Great   |  Rate Content |
Average rating:  No Ratings Yet   
Number of Ratings : 0
  Comments
Add Comment
No Comments Yet