Skip to main content

Decorations - Background Image

Background Image comes under Decorations category in Style Manager. As the name suggests, it allows you to decorate the background of a component. You can either add an image, color or gradient color pattern in the background of a component.

DrapCode Builder Image Background

How to Add an Image in the Background​

As you click on the component in which you want to add a background image, the Style Manager of that component opens automatically in the Right Toolbar. You only have to go to the Background settings under the category, "Decorations" and click the add icon, which looks like this DrapCode Builder Background Icon, to add a layer of an image in the background.

DrapCode Builder Background Image

After adding the image, adjust the following fields:

1. Background Repeat

Allows you to set how the added image in the background of a component will repeat.

DrapCode Builder Image Background Repeat
  • repeat: Repeats the image in the background vertically and horizontally by default.
  • repeat-x: Repeats the image in the background horizontally only.
  • repeat-y: Repeats the image in the background vertically only.
  • no-repeat: The image in the background doesn't repeat, once it's shown.

2. Background Position

Allows you to set the position of the added image in the background of a component. By default, the added image is placed in the "left top" position.

DrapCode Builder Image Background Position

3. Background Attachment

Allows you to choose whether the background image will move or scroll with the rest of the page.

DrapCode Builder Image Background Attachment
  • Scroll: Background image scrolls with the rest of the page by default.
  • Fixed: Background image does not scroll with the rest of the page.
  • Local: Background image scrolls with the content added in the component.

4. Background Size

Allows you to set the size of the added image in the background of a component.

  • Auto: Default value which displays the background image in its orginal size.

  • Cover: Displays the background image by resizing it to cover the entire background of the component, even by trimming the image.

  • Contain: Displays the background image by resizing it to ensure full visibility of the image, even if it fails to cover the entire background.

    DrapCode Builder Image Background Size Adjust