Learning & Support


Styling: Custom Background Images

Twixl Support Team Updated: - Created :

    Background images are a great way to bring depth or personalization into your app.

    1. Where are Background Images used?

    In addition of one background color in a collection, you can add more depth, create an atmosphere or even insert your house style by using background images in your app.

    Background images can be used as some sort of wallpaper in collections that are in browse view mode. This means the thumbnails of all content items in that collections will be shown in a browse grid and the background image will be behind the grid of thumbnails.

    2. How to use background images?

    First of all, upload your images in a repository so you can use these in the grid styles of your app.

    • In the left menu > Design > Background Images
    • Click on the "+" icon to add your background image
    • In the drop zone, you can drop one or more .jpg or .png files or select files from your drives.

    Once you click 'Upload', these files can be used in the grid style editor. In the editor, you can Add or Edit a style. The images you uploaded will be available under the section 'Background Image'.

    If you select an image, you'll get a preview of the result (how much you'll see of the image will also be dependent on your padding settings).

    Because different grid styles can have a different background image, you can choose to use different backgrounds for different collections. You can also use different images for tablet / phone /  browser.

    Was this article helpful?

    0 out of 0 found this helpful