Background Images and Dimensions
Open the block and select the Background & Effects tab.
Desktop Background Image
Select the primary background image from the Concrete CMS file manager.
The image is rendered as a CSS background using background-size: cover. Depending on the relationship between the image dimensions and the hero dimensions, parts of the image may be cropped.
Use the horizontal and vertical background-position controls to keep the important part of the image visible.
Mobile Background Image
A separate mobile background image is optional.
At viewport widths below 768 pixels, the mobile image is used when one is selected. When no mobile image is selected, the desktop image remains in use.
A dedicated portrait or square image often provides better results on phones than a very wide desktop image.
Height
Height is configured in viewport-height units.
Supported range:
- Minimum: 20 vh
- Maximum: 100 vh
- Default: 60 vh
The value defines the minimum hero height. Content may require additional height when it cannot fit within the configured minimum.
Background Position
Horizontal and vertical positions are configured from 0% to 100%.
Typical values:
- Horizontal 0%: left
- Horizontal 50%: center
- Horizontal 100%: right
- Vertical 0%: top
- Vertical 50%: center
- Vertical 100%: bottom
Maximum Content Width
The content area can be limited independently from the full-width background.
Supported range:
- Minimum: 320 pixels
- Maximum: 2400 pixels
- Default: 1200 pixels
Content Spacing
Horizontal and vertical content spacing control the distance between the hero edge and the content area.
A value of 0 uses the responsive default:
- Horizontal: responsive spacing based on the viewport width
- Vertical: responsive spacing based on the viewport height and width
Custom values are accepted from 0 to 400 pixels.
For the Content Left template, horizontal spacing moves content farther from the left edge. For Content Right, it moves content farther from the right edge. Content Center uses the spacing symmetrically.
