gitpitch/docs/media/color-backgrounds.md
2020-09-29 07:14:34 +01:00

1.7 KiB

Color Backgrounds

Using a dedicated grid layouts block you can create a custom color background for any side. Any additional content on the slide is overlaid on top of the dedicated color background block.

?> For further details about color and image backgrounds see the Grid Backgrounds Guide.

Solid Colors

The following basic syntax is used to activate a custom color background for any slide:

[drag=100, set=back-9, bg=color]

Additional slide content goes here.

Note the use and purpose of the following properties:

  1. The color option on the bg= property takes any valid CSS Color Value.
  2. The drag=100 property values ensures the colored block covers the entire area of the slide.
  3. The set=back-9 property value ensures the colored block remains in the background.

The following sample slide screenshot demonstrates a slide color background:

Sample slide demonstrating slide background color

Gradient Colors

Special --?color= delimiter syntax can be used to activate a color gradient background for any slide:

---?color=linear-gradient(to left, #56ccf2, #2f80ed)

Additional slide content goes here.

The --?color= delimiter takes any valid linear gradient value as defined by the CSS Gradients Guide.

Sample slide demonstrating slide background gradient

?> For some stunning background color gradient inspiration check out UI Gradients.