Advanced Grid Builder allows you to use three types of images in your grids: background images, element pattern images, and transition images. All of these images are sourced from the featured image of the respective post. Background images are distinct because they set the background-image
CSS property for a cell or content area instead of inserting a separate <img>
element. This functionality is useful for providing visual context for the content within a cell.
Additionally, you can use an image overlay with background images to enhance text readability. An overlay is a semi-transparent colour layer that modifies the appearance of the background image.
Setting Background Images
The featured post image is automatically designated as the background image. You can manage its display using the Cell Background Images
or Content Background Images
dropdown menus. Choose "off" to disable the background image, "fill" to stretch the image to fully fit the container, or "contain" to ensure the image is contained within the boundaries of the container.
Image Overlay Colour
You can specify an overlay colour for your background image using the Cell Overlay Colour
or Content Overlay Colour
field. Utilise a CSS colour value, preferably in a semi-transparent format to allow the background image to show through. For instance, use rgba(0, 0, 0, 0.5)
for a semi-transparent black overlay.
Aspect Ratios and Background Images
Combining aspect ratios with background images offers greater control over your grid's appearance, particularly when the content within a cell does not provide sufficient height. By setting an aspect ratio, you can determine the shape of your background image to better fit your grid design.
The following example demonstrates how to effectively use content and cell background images alongside transition images and element pattern images: