Built with Readz
LEARN MORE
Contact Support
Need more help? Get in touch!
Contact support
We're available 6 a.m. to 6 p.m. PST
© 2022 Readz All Rights Reserved

Page Backgrounds

You can easily style the background of your page. Several options are available to you:
  • solid color
  • image
  • gradient
  • video
How to add a page background
To change your page background, you can click the image icon on the left toolbar.
page-background.webp
The Page Background panel will open up.
Full Color Background
By default, every page will have a color background set. You can change the HEX value and opacity of the background next to the color box directly, or access more options by clicking on the color box:
Image Background
To add an image background, you first need to add another background layer on top of the base color layer. You can do this by clicking the '+' icon next to Background Fills.
Once you do so, another background layer will be added:
This additional layer will by default have a color value. To change this to an image, click the Color box, and a panel with more options will open up. In this panel, at the top, select 'Image'. You can now upload your image to set it as a background for your page.
For image elements, you have three display (or scaling) options available to define how the image will interact with its container, which is the actual media element. In all three options, the image's aspect ratio is maintained.
  • fill: the image will stretch to completely fill its container. Some parts of the image can be hidden.
  • contain: the image will stretch up to the available height or width of the container, whichever is smallest. Some negative space can occur in the container.
With the position options, you can move the image around within its container (the image element). You can either move the blue dot around or enter the desired position values directly.
For images with a 'Fill' display, this will affect what part of the image is visible.
For images with a 'Contain' display, it will determine how the image fits into the container.

Gradient Background
To change the page background to a gradient, open up the options panel as described above and select Gradient. You can:
  • choose between linear and radial gradients,
  • add, move and delete stop points,
  • change the gradient colors
Multiple Backgrounds
You can combine all of the above types of layers to create your background. Setting opacity to different levels will allow the backgrounds to be visible.

To remove a background, click the '-' icon next to the background layer.
Video Backgrounds
You can add a video as a background. For background videos we support the streaming services Youtube and Vimeo and MP4 videos. Adding a video will hide all other background layers on the page. To add a video background, click the '+' icon next to Background fills to add a background layer. This additional layer will by default have a color value. To change this to a video, click the Color box, and a panel with more options will open up. In this panel, at the top, select 'Video'. Add a Youtube or Vimeo video by copy/pasting the URL of the video in the Streaming box, or choose an MP4 video from your Media Library . Automatically, the video will be set to 'Autoplay.' Additional options to control the video stream will be available to you in the Youtube or Vimeo settings. Important: Video backgrounds are not available by default on mobile devices (tablets and phones): most users are not happy if you start a video streaming that consumes the monthly traffic or device battery for a visual background effect: this is a note as a best practice in web development. Also note that not all mobile devices support autoplay video background, although it's recently supported by the major mobile devices (recent versions of iOS and Android).