Backgrounds

Add depth with a background texture

Home

/

Snippets

/

Components

/

Backgrounds

Background Texture Masks

Background textures can be applied using a variety of sizing, color, repetition, positioning and texture style classes.

Customize the color of your backgrounds texture with pt-mask-(color).

To adjust the pattern's size use the .pt-mask-size-(px or %) classes.

Position your background in its section .pt-mask-(position), choosing from center, top, bottom, left, right or inherit.

Modify the mask's repetition using .pt-mask-(repetition), with choices between repeat, norepeat, repeatx, repeaty, round, space or inherit.

Pick the texture that best fits your style below ranging from .pt-bg-mosaic, .pt-bg-bubbles, .pt-bg-blur to .pt-bg-dot-grid, .pt-bg-eclipse, .pt-bg-striped.

Mosaic

Apply the mosaic texture to any section with .pt-bg-mosaic.

Bubbles

Apply the bubbles texture to any section with .pt-bg-bubbles.

Blur

Apply the blur texture to any section with .pt-bg-blur.

Wave

Apply the wave texture to any section with .pt-bg-wave.

Curve

Apply the curve texture to any section with .pt-bg-curve.

Chevron Block

Apply the chevron block texture to any section with .pt-bg-chevron-block.

Paw Prints

Apply the paw prints texture to any section with .pt-bg-paw-prints.

Line Grid

Apply the line grid texture to any section with .pt-bg-line-grid.

Dot Grid

Apply the dot grid texture to any section with .pt-bg-dot-grid.

Eclipse

Apply the eclipse texture to any section with .pt-bg-eclipse.

Striped

Apply the striped texture to any section with .pt-bg-striped.

Crosses

Apply the crosses texture to any section with .pt-bg-crosses.

Diamond Checkerboard

Apply the diamond checkerboard texture to any section with .pt-bg-diamond-checker.

Note Grid

Apply the note grid texture to any section with .pt-bg-note-grid.

Diamonds

Apply the diamonds texture to any section with .pt-bg-diamonds.

Bricks

Apply the brick texture to any section with .pt-bg-brick.

Waves & Dashes

Apply the waves & dashes texture to any section with .pt-bg-waves-dashes.

Aztec

Apply the aztec texture to any section with .pt-bg-aztec.

Sprinkles

Apply the sprinkles texture to any section with .pt-bg-sprinkles.