Custom Module BACKGROUND 

A unique feature of the CUSTOM MODULE is its OPTIONS tab.

This tab enables you to add a BACKGROUND Image to a CUSTOM MODULE.

See image.

module custom edit 3 options 

Custom Module BACKGROUND Images

Here are three examples of how a background image can enhance the display of a Custom Module.

bg image eg repeating

By default in a WYNCHCO website design any image you choose to display as a Custom Module background will repeat horizontally and vertically.

This default setting is appropriate when you choose to display a SOLID colour background.

But not when you choose to display a GRADIENT or NON-REPEATING background image.

For this reason we include Quick Fix Style Sets with every WYNCHCO website design - see next tabs.

bg mage eg gradientWe include a Quick Fix Style Set called GRAD-BG in every WYNCHCO website design.

When you choose to display a GRADIENT background image, assign the GRAD-BG Style Set to the Custom Module.

The background image will then ONLY repeat horizontally.

Read how to assign the GRAD-BG Style Set to a Custom Module at the following link.

QUICK FIX Style Sets to improve display of image backgrounds.

bg image eg non repeating

We include a Quick Fix Style Set called PIC-BG in every WYNCHCO website design.

When you choose to display a NON-REPEATING background image, assign the PIC-BG Style Set to the Custom Module.

The background image will then NOT repeat.

Read how to assign the PIC-BG Style Set to a Custom Module at the following link.

QUICK FIX Style Sets to improve display of image backgrounds.

How to display a BACKGROUND Image

Use the SELECT Button under the OPTIONS tab - see above image - to browse for an image to display as the Custom Module BACKGROUND.

Suitable images might include a:

  • solid colour swatch,
  • repeating pattern or
  • photograph.

We include exemplar background images in the BACKGROUND folder of the MEDIA screen of a WYNCHCO website design. 

But you may choose to display any image from any MEDIA folder.

Here's how to find an image to display as a Custom Module BACKGROUND.

After clicking the SELECT button under the OPTIONS tab, you will be able to browse for an image.

Open the BACKGROUND folder to select an image.

module custom edit 3 options 2

Select an image and click the INSERT button.

When done, select SAVE & CLOSE and review the result in your website's Front End.

Remember to refresh your web browser when you do.

module custom edit 3 options 3

Check Colour Contrast when you choose to display a Background Image

When you choose to display a BACKGROUND IMAGE in a CUSTOM Module you should consider the needs of all your website's visitors, including those who may be visually impaired.

Do check that your choice of Background Image does not reduce the level of colour contrast between the background and foreground text.

Two reasons:

  1. to maintain readability, and
  2. to avoid discriminating against visually impaired users.

We recommend: Check colour contrast using the WebAIM Colour Contrast Checker.

 

Adjust Custom Module PADDING when you display a Background Image

You may wish to adjust the CUSTOM Module's padding after adding a BACKGROUND image.

Padding will insert space between the Module's content and its edges.

Read more: How to adjust Custom Module Padding.