Creating Background Images in Trello

When a user uploads custom board backgrounds as part of  Trello Gold or Trello Business Class, Trello will automatically scale the image to fit the board based on the size of the window the board is loaded in. Custom background images are visible to all members on a board.

This article has more information about the specifics of how we scale those images, so users who are looking for a very specific look (like a centered logo) have more info about what, exactly, we do to the images.

Warning: this article gets into the very nitty-gritty of image resizing. In most cases, you'll be fine by just uploading a high-resolution image (up to 10MB) that's wider than it is tall.

How our web interface generates resized images

Trello first looks at your uploaded image, and generates scaled versions that fit common screen ratios. If your uploaded image is a different height/width ratio than the image Trello's trying to create, then Trello will first scale your image until one side matches the height or width that Trello is looking for.

Once that side of the image is the correct size, Trello will center the scaled image, and crop the rest of the image to the canvas. That means that if you have content that you always want to show on the board background, a good bet is to put that content in the direct center of the image that you upload.

Loading scaled images

When Trello's loaded in a browser, Trello pulls information about the browser window size from the browser. Based on that, Trello tries to find a scaled version of the background that's bigger than the window in both dimensions. If none exist (because, for example, the browser window is very large and the uploaded image was very small), Trello will use the original uploaded image.

Once Trello has decided which image it will use, it anchors the image to the top left of the browser window. If the image is wider than the window, Trello will cut off the right side of the image. If the image is taller than the window, Trello will cut off the bottom of the image.

Resizing the browser window

Once Trello picks the version of the background that it's going to use, it sticks with that image even if you resize the page. So, if you open Trello in a small window, and then expand that window out, you can see some unexpected background behavior. In that case, refreshing the window will update the background image.

Picking the ideal image resolution

Because of how Trello resizes images, the ideal background image resolution and ratio is going to be the same as the browser window that you regularly use to access Trello. Of course, board members may be accessing Trello in all sorts of environments—that means that different users will see different versions of the background depending on how they access the app. 

If this is a concern, then we'd suggest uploading a background image that either relies on tiled versions of your content (small versions of a logo, repeated, will guarantee that the logo will show on all screens; a big image with one logo doesn't). If that isn't possible, the second-best choice is to make sure that the image you're using centers whatever content it is that you want users to focus on.