How to add background images to cards

Our Flourish Cards template empowers you to add background images to your visualisation, turning simple content into a visual centerpiece. Read below on how to add images to your cards.

Setting up your images

1

We are going to start in the data tab, 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

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

3

Once you have uploaded your image, you will want to ensure that you have the correct column selected in the Image 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 of the Cards template, you can upload and customize images using HTML and CSS.

1

Follow the same steps as before, by 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 to 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}}).