Skip to content

Custom Background Images

Jump to bottom
Miguel "skai" Silva edited this page Apr 30, 2024 · 3 revisions

Before you begin

All background images used in TF2 are texture files with the .vtf file extension. This means you'll have to convert your images before you can use them to replace the HUD backgrounds. To do that download VTFEdit.

At this point it is also important to note that the image you choose will always be stretched to fit your screen, so pick something that fits your TF2 native resolution.

Converting your image to .vtf

  1. Open VTFEdit
  2. Click on File > Import or simply press CTRL + I

  1. A window with a bunch of options will pop up. You can leave most of these settings on their default values. The only setting you need to change is the version and it can be found on the advanced tab. Make sure you set this to 7.0 and then hit OK .

  1. On the left bar you should be able to see a Flags: section. Tick the No Mipmap and No Level Of Detail boxes. This will ensure that your image will always be shown at full quality, regardless of your graphics settings.

  1. Click on File > Save As to save your image as .vtf .

Replacing the stock background images with your own

Important

These instructions were written for skyhud specifically and may not be compatible with other HUDs.

There are three background images in skyhud that you might want to replace with your own:

  • Loading screen/Startup screen

  • Main menu background

  • Inventory menus background

Loading screen/Startup screen

  1. Make two copies of the .vtf image you converted using VTFEdit and name them background_upward.vtf and background_upward_widescreen.vtf .

  2. Navigate to \Team Fortress 2\tf\custom\skyhud\materials\console . Move the two copies you created in the previous step to this folder. Your file manager will ask you if you want to overwrite the two files already present in this directory, and you should click on replace.

  3. Restart TF2.

Your custom image should now be the one shown on the loading screen when you launch the game.

Main menu background

  1. Make a copy of the .vtf image you converted using VTFEdit and name it Sky.vtf .

  2. Navigate to \Team Fortress 2\tf\custom\skyhud\materials\vgui\replay\thumbnails\menu . Move the copy you created in the previous step to this folder. Your file manager will ask you if you want to overwrite the two files already present in this directory, and you should click on replace.

  3. Restart TF2.

Your custom image should now be the one shown on the main menu.

Inventory menus background

Note

Skyhud uses a blurred version of the main menu background for all backgrounds in the inventory menus to make items and characters stand out. If you wish to keep this effect, you will have to manually edit your image to have blur as the HUD does not apply the blur effect on it's own.

  1. Make a copy of the .vtf image you converted using VTFEdit and name it Sky_Blur.vtf .

  2. Navigate to \Team Fortress 2\tf\custom\skyhud\materials\vgui\replay\thumbnails\menu . Move the copy you created in the previous step to this folder. Your file manager will ask you if you want to overwrite the two files already present in this directory, and you should click on replace.

  3. Restart TF2.

Your custom image should now be the one shown on all inventory menus.

Clone this wiki locally