Background Properties

Background properties


There are several ways to fill a background:


You can apply custom settings for the background of a block, section or page.

How to edit a section background properties


To edit a section background, you can click the Background icon in Settings Panel at the end of the section’s title.

How to edit a background of multiple sections


Grouping sections helps you to make the same background for all child sections.

To make a group, select some sections while holding the key: Command for macOS or Control for Windows, and click the Group selected button.

Now you can set a background of the group clicking the Image icon at the end of the group’s name. The group background replaces their child sections’ backgrounds.

How to edit a page background


To adjust a page background, open the panel Page Style and upload an image.

Color fill and opacity


To add a solid color, open background settings of the section (or block) and click the Color in Settings Panel. Now you can pick the color in the Color Picker.
  • Checking the opacity in the Color Picker changes your background color from transparent to solid. To get a solid color, check the opacity at 100%.
  • To view the color background, examine that there is no image or video background and the overlay color set at 0%.

Gradient


Increase the visual appeal with the use of gradients.

To add a color gradient, open the section (or block) properties in Settings Panel and press the Plus icon to add new color.
  • It’s possible to add up to 4 colors to the linear gradient.
  • Adjust the colors opacity to make a solid or transparent gradient background.

Background image


Add a background to a section or block


To insert a background image to the section, click the Background icon in Settings Panel at the end of the section’s title.
To upload an image to the block’s background, hover over the block in Preview Area and click the Background icon.
Now you can upload an image in two ways:

  • using the Upload Image button,
  • entering a link to the image resource file in the Image field.

Set the position of the background image:

  • Left - moves an image horizontally.
  • Top - moves an image vertically.
To center an image, click the round icon at the center of the preview image area in Settings Panel.

Configure the display of the image:

  • Normal - displays the original image.
  • Tile vertically - uses an image and repeat it vertically.
  • Tile horizontally - uses an image and repeat it horizontally.
  • Tile both - uses an image and repeats it multiple times both vertically and horizontally.
  • Cover - displays the image at the full width of the section. This mode increases or decrease the width of the picture to fit the width of the browser window. To set the image vertical position, adjust the Top parameter value.
  • Stretch - displays the image at the full height of the section. This mode may affect image quality because this mode increases or decrease the height of the picture to fit the height of the section. To set the image horizontal position, adjust the Left parameter value.

Add a background to the page


You can use an image as a background for the whole page.

Open the panel Page Style.

Now you can upload an image in three ways:

  • using the Upload Image button,
  • entering a link to the image resource file in the Image field,
  • drag and drop an image to the Image upload button or to the specific position on the page in Preview Area.

Set the position of the background image:

  • X - moves an image horizontally.
  • Y - moves an image vertically.

Full-screen video background


You can use a video background instead of image to a section or page.

  • Open the section’s background properties clicking the Background icon at the end of the section’s title.
  • Choose Video tab and upload a video file or enter the link to the resource file.
  • To add a video background to the page, open the panel Page Style.
  • Upload a video file or enter the link to the resource file.

Add a color overlay to the background


Apply a color over an image or video to make a background more contrast for foreground elements. It also helps to make a text more readable on the image or video.

To add a color filter over the image or video for the section, you can adjust the Overlay Color in Settings Panel and increase or decrease its opacity level.

Fixed and parallax background image


Fixed and parallax effects are design techniques:

  • when using a fixed background image, the image will remain static, while the content will move over the image as your scroll down the page.
    To add a fixed background to the page:

  • when using a parallax background image, both the image and the content will move as your scroll down the page, but at different speeds.
    To add a parallax to the section background:

    • Add a background to the section.
    • Enable the Parallax on background in Settings Panel for this section.
    • Open your landing page in the Preview mode to see the parallax effect clicking the Preview icon at the top menu.

Repeat an image for all sections


You can upload a background image and repeat it for all sections on the page.

Remove a background image


To remove a background image from a section, block or page open Settings Panel and click the Delete button.

Next steps

Questions?

Support

We are always happy to help with a code, improve a guide or consider a feature.

GitHub

Ptah is the easy-to-use open-source landing page builder without any coding designed for video games.