From Official Kodi Wiki
Jump to: navigation, search
Cleanup.png This page or section may require cleanup, updating, spellchecking, reformatting and/or updated images. Please improve this page if you can. The discussion page may contain suggestions.

Fan art, also known as Backdrops, are high quality artwork that is displayed in the background as wallpapers of media center GUI menus. FanArt is typically made to be displayed as a backdrop when metadata about a specific Movie, TV Show, or Music Artist is displayed on the screen, as both eye candy and to set the mood. In some Kodi skins, fanart is also sometimes used as a sort of landscape alternative to posters.

XBMC Media Center supports backdrops for Movies, TV Shows, Music Artists/Groups/Bands, and Weather conditions.


1 Examples

This first image is an example of some FanArt. It is a fan created image honoring the show Stargate Atlantis. FanArt can of course take many forms, this is just an example. Kodi will take this image and then use it in your video library. When you are browsing through the seasons or episodes of Stargate Atlantis, Kodi will display the FanArt in the background.

Fanart example.jpg

This second image shows just one example of how Kodi can display the FanArt backdrops. Exactly how the FanArt appears is dependent on the skin you are using. This image is with the Fusion skin, and other skins will present a different view. Whatever television show you are browsing, FanArt will be shown as long as FanArt is available.

Example fanart in xbmc.jpg

2 Using FanArt in Kodi

Fanart is as of Kodi version 9.04 available both for Music and Videos.

2.1 Video FanArt in Kodi

Video FanArt is available in the video library, both for television shows and movies. It has to be enabled via the Settings, Skin settings "Custom" panel. FanArt is retrieved from user submitted FanArt at sites such as (TMDB),, and


In order to use TV show FanArt you must be using the scraper. When you scrape a show for show information, FanArt is automatically retrieved and the highest user rated FanArt is used by default.

Movie FanArt is available for most movie scrapers by way of TheMovieDB.

You can also have your own custom FanArt background:

  • TV shows via fanart.jpg in the TV show folder.
  • Movies via moviefilename-fanart.jpg in the same folder as the 'moviefilename' media file.
  • Movies fanart.jpg if the movie is in it's own folder.

Display of the FanArt is entirely dependent on how the skin chooses to use the image, for TV shows it is generally displayed when browsing the season and episode nodes.

You may change FanArt by using the "Get Fanart" button in the Media Information Screen.

2.2 Music FanArt in Kodi

Music FanArt is available in the music library. Fanart is retrieved from user submitted fanart at sites such as

You can also have your own custom FanArt background via fanart.jpg in the artist folder.

3 Make your own FanArt for Kodi

Fan Art is high quality artwork that is displayed in the background of HTPC (Home Theater PC) menus. Since FanArt is displayed behind other content in most cases, we place more restrictions on the formatting of the image. When you make FanArt backdrops for Kodi try to create high-quality full screen images in 1920x1080 or 1280x720 pixel resolutions (both are in widescreen aspect-ratio). When creating FanArt try to avoid having logos or any kind of text to avoid overlapping with media info shown by Kodi GUI skins, and do not have any preconception on where the menu will be displays as not all skins are designed the same.

3.1 FanArt sources

Websites where to download and upload FanArt from and to:

  • A large collection of images for specialist art types such as ClearLOGOs, ClearART and cdART, for both TV and Music
  • (TMDb) has a lot Movie FanArt images in original Full HD size (1920x1080) and you can search site by movie name.
  • has large collection of TV Shows FanArt images.
  • (Home Theater Backdrops) has large collection of music artist FanArt images (also offers FanArt for weather and games).
  • has large collections of movies FanArt images (limited to 1280x720).
  • has large collection of Movies and TV Show posters and promo images.
  • has large collection of high-quality movie posters available for download for a small subscription fee.

3.2 File Properties of FanArt

All FanArt files must be in JPG format. The resolution must be either 1920x1080 or 1280x720. Compression artifacts in don't appear in most JPG images if the compression is set to 70% or higher. As a result, we've set file size limits to persuade people to compress their fan art. These limits are 800k for 1920x1080 images and 600k for 1280x720. These limits will be adjusted upward if necessary. If you cannot compress your fan art to fit these limits without artifacting, please post a message on our forums with a link to the image.

3.3 Image Design of FanArt

All fan art images for a specific series should be significantly different. This means that there should not be 2 copies of the same image, one for each resolution. Simply adding a logo or changing a color scheme to an existing image does not qualify as being significantly different. If you have and improved version of an image (better quality source, etc), post on our forums and we'll consider replacing the existing art with your copy.

Please try to avoid placing series logos and text on fan art. Many HTPC (Home Theater PC) media center applications will already be displaying the series banner so showing the series name again is redundant. If you do add a logo, please make sure it is as high quality as the fan art image itself.

Do NOT place predefined menu areas in your image. The important content in the image should fill as much of the image as possible, with no gradients or borders added for menus. When you upload an image we will automatically create menu masked areas for applications to use. If you add these areas yourself, it will result in two gradients being applied to your image.

3.3.1 Good and Bad FanArt Examples

Good Fanart: The content fills the entire image and there are no masked menu areas. Fanart good bsg.jpg

This below is the result of the above good Fanart Fanart image with the automatic upper-left vignette applied via skinning. Fanart good bsg result.jpg

Bad Fanart: The image below has the vignette pre-applied, which will result in a poor automatic vignette. Fanart bad bsg.jpg

The below shows the result of the above bad Fanart image with the automatic upper-left vignette applied. Note that due to the automatic vignette, the content is now approximately 25% of the size it should be. This would be far worse in an image with a non-black vignette, since you'd get a gradient in the middle of the image. Fanart bad bsg result.jpg

Bad Fanart: There are two things wrong with the image below. First, it has the gradient for the menu area already applied, which will result in a result similar to the one above. It also has a predefined menu area in the lower left of the image. This makes assumptions as to where the menu and content will be located for the end-user. Not all skins/systems work the same. Fanart bad pushingdaisies.jpg

Bad Fanart: Do not, like in the example below, resize low-resolution images to the resolutions we require. This looks awful. If you can't find high-resolution source images to work with, allow a more talented artist to assemble lower quality images into a high-resolution composite. Fanart bad pushingdaisies2.jpg

4 Skinning a Kodi skin for FanArt

The following information is designed for skinners who wish to create a skin for Kodi or modify an existing skin to take advantage of FanArt. End users need not worry about this information.

There are two aspects to FanArt. There is the image, which is the most prominent aspect of FanArt, and then there are the FanArt colors. Skins may use either or both. The colors are three colors designed to "go with" the image and may be used to alter the interface colors if desired.

4.1 FanArt Infolabels

There are four infolabels that are available to a skin which can be used for the display of fanart.

Fanart.Image Used in an image control to display the currently selected fanart for the parent TV show
Fanart.Color1 Returns the first of three fanart colors in the currently selected fanart theme for the parent TV Show. Colors are arranged lightest to darkest and generally provide a light highlight color, a dark highlight color, and a neutral or matte color.
Fanart.Color2 Returns the second of three fanart colors in the currently selected fanart theme for the parent TV Show. Colors are arranged lightest to darkest and generally provide a light highlight color, a dark highlight color, and a neutral or matte color.
Fanart.Color3 Returns the third of three fanart colors in the currently selected fanart theme for the parent TV Show. Colors are arranged lightest to darkest and generally provide a light highlight color, a dark highlight color, and a neutral or matte color.

4.2 DialogVideoInfo.xml

Any skin that supports FanArt should provide the user a button to select a different FanArt. This button works similar to the "Get Thumb" button in DialogVideoInfo.xml and must have a control ID of 12.

4.3 More About FanArt Colors

One fun aspect of FanArt support is that it is more than just an image. Kodi has support for FanArt themes which means the skin has the ability to completely adapt the current view to the image and the colors in the image. It can do this through the use of the three fanart color infolabels. When FanArt images are uploaded by a user to, they are asked to select three colors, or the system auto-generates three colors, which are designed to "go with" the image and provide a light highlight color, a dark highlight color, and a neutral matte color.

Personal tools

Wiki help