How to add background images to cards

Our Cards template is an incredible way to display content, and can even be used as a navigation tool for your website. Adding background images can make your cards look even better. Here's how to add images to your cards:

In this article

Setting up your images

    1
    We are going to start in the data table as this is where we are going to place our images. If you have uploaded your data, you will need to add a new column for the images.


    2
    Here we will insert our images into this column on the corresponding row. You can use different images for each row or keep the image the same. Find out more about uploading images to Flourish here.

    3
    Once you have uploaded your image, you will want to ensure that you have included your column/have the correct column selected in the column binding. You can change that in the panel on the right-hand side.

Customizing your background images

    1
    The cards template offers two primary ways of showing images:
    • Image overlay
    • A standard image appearing above or below the text

    These settings can be changed within the Cards drop-down menu in the settings and changing the Card layout option. In our example, we have used the image overlay.

    2
    To change the color of the image overlay, you will want to use the Colors setting. You can read more about this in our help doc about changing the color of your cards.
    3
    You can also customize how your image appears by using the Image setting. This will allow you to change the opacity, image sizing, blend mode, and much more. Click on the Advanced image styling settings for more options.

Using HTML to upload a background image

With the Customise Card HTML feature with the Cards template, you can upload images using HTML and CSS.

    1
    Follow the same steps as before, with inserting a new column and adding your images.
    2
    Under the Cards settings, scroll to the bottom of the panel and switch the Customise Card HTML "On".
    3
    There will already be a line of code that exists for the background image. It will look like this: 
    <div class="image-container">
<div class="image" style="background-image: url({{column_name}})">
</div>
</div>
    4
    Change the "({{column_name}})" for the name of the column that your images are in, for example, ({{images}}).

Related Articles