Background Images

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: 

0
0
AGB Theme v6.3.0
Postgrid ID
Preset
Animation
Accent Colour
Odd Colour
Even Colour
ID of agb to copy
ID to send to the cloud
ID to retrieve from the cloud
Grid type
Background Images

Post 8

Background Images
Background Images

Post 7

Background Images