Background

Introduction

The background block provides an area that is backed by an image.  It is great for adding content over an image.

The background block has a number of settings the affect how the images moves with the text, and also how to size the image relative to the rest of the content.  The aspect ratio setting allows you to effect the height of the section across different screen sized, and therefore across different devices.

Editor

The background block editor allows you to upload an image to use as the background for the contained section.

You can then drop other content into the section within the background block.  You can see a background block, which contains a Text block in the image below.

Click "..." to upload a new image, or select one from the media gallery.

Background Block

Settings

On the settings panel, you can affect the look and feel of the background block.

Aspect Ratio

The aspect ratio is the ratio of width to height of the section.  A ratio of 1 will cause the background to be as wide as it is tall.

You can also specify aspect ratios at differing resolutions using the following repeating format:

minimum width-maximum width:ratio

An aspect ratio of -768:1 769:1280:2 will cause it to use a ratio of 1 up to a device 768 pixels wide, and an aspect ratio of 2 for a device between 769 and 1280 pixels wide.

Sizing Model

Specifies how the background is sized, according to the following rules:

  • Content: Allow the section to get bigger to smaller based on the size of the content it contains.
  • Aspect Ratio: See the aspect ratio setting.
  • Fill Display: The section will grow to take up the width and height of the display, from the point where it is placed to the bottom righthand corner.

Background Size

Uses the same values as the background-size CSS setting.  "cover" and "contain" are the most common settings.

Background Attachment

Causes the image to move and flow with the text according to the following rules:

  • Fixed: The image does not move with the page, it remains in a fixed position.
  • Scroll: The image scrolls with the page, either faster or slower than the page.  See the Scroll setting.

Content Width

The width of the section contained within the block.  Setting this to 50% will make it center itself within the section and take up half the width.

Scroll

Set a scroll ratio for the image when background attachment is set to scroll.  A value of 1 will cause the image to move with the page, >1 moves it faster than the page, and <1 slower than the page.