This guide was made after the Half-Life 25th anniversary update.

One of the items was... "Main-menu background and buttons have been reskinned, and now scale based upon screen resolution without stretching, supporting background image layouts up to 3840x1600"

So...what? Well the backgrounds can now scale from 600 X 480 right up to 4K and other problematic 16:9, 21:9 and even 32:9 aspect ratio displays without stretching the image.

It does this by leaving the height and just "snipping" off the edges of the image to fit the display resolutions.

Below is the same background image on two very different resolutions, you can see what I mean by "snipping" off the edges and not stretching the image...

 dod charlie 21 9  dod charlie 4 3
 dod_charlie - 21:9 aspect ratio (Ultra wide 2560X1080)  dod_charlie - 4:3 aspect ratio 800 x 600 note this is the same background.

 

Before you start, make sure you understand what happens to background images on different aspect ratios 4:3. 16:10, 16:9, 21:9, 32:9.

Your base image may look OK on a aspect ratio of 16:9 (1920 X 1080) but a person using 4:3 (800 X 600) or 21:9 (3440X1440) will see compression or stretching of the image.

The method I used above was to make a 2560 X 1080 (21:9) aspect ratio and edit the text files so it doesn't scale instead fits the screen.

More on that as we go but just be aware if you are sharing this for other resolutions, say on Gamebanana, you need to either make multiple sizes or use the method I did by editing the text files.

That "fit" method is OK and I made one that goes from 3840 X 1080 32:9 Ultra wide to 4:3 normal screens 800 X 600... but that method cuts off the ends so centre any content and expect the edges to be cut off as the aspect ratio goes from a longer width rectangle (32:9) to a near square rectangle (4:3). You can see that in the image above. 

 

However, making a background for one resolution is dead easy. Just make the source image in your monitors native resolution... set that in the program we are using.  

 

Index

 Software required
 How to assemble the files
 Files and how they work. 

Software required

CS Background Maker 1.2 by kober – https://kobersky.eu/

You can download that on sturmbot.org here.

Any graphic processing program - Photoshop, Gimp, Paint.net.

This will take just about any image and convert the image to a specific resolution or a custom resolution.

That’s important to the process below.


This is important as the image is spliced into smaller images and two .txt files are made to display the images on the screen. After the HL25 update, those .txt files have to be further altered. That is quite a job to do manually as this guide explains.

How to assemble the files

I am assuming you already have an image.
That image could be 1920X1080, up to 3840X1600 (both 16:9 aspect ratios) or even 3840X1080 (32:9 aspect ratio (ultra-wide format) .

You can make any resolution and place that in CS Background Maker 1.2.

But if you intend to share that background it will not scale correctly, there is a solution to correct that later.

For now I assume you want to make your own so make a image based on your monitor native resolution and aspect ratio.

Just remember that different aspect ratios will look different on the screen.


I’m not going to give you a guide on graphic programs… just get your image looking OK at a your chosen resolution.
You can read the section “Files and how they work.” and work out why I decided to assemble the files like I have.

Using the CS Background Maker 1.2, open CsBackgroundMaker.exe.

Now press the “Load Image” button.

You will note your image is there and an output resolution is now in the “Output resolution” box. In my case that was 1920X1080.

 

As you can see the two characters are compressed, that was done to display correctly on 21:9 and 32:9 ratio Ultra-wide screens.

Don’t worry the compressed image will scale after edits in the process.

That is just to show you the problems you can have in GUI backgrounds and solutions you can do to overcome some scaling issues.

 

We will now alter the resolution, drop down the “Output resolution” and select “Custom”...

  • My image is special, I inserted 3840 X 1600 (4K 16:9 aspect ratio) that has a compressed width as I am doing a background to work on ultra-wide 21:9 and 32:9 , 4K 16:9 and also 4:3 aspect ratios
  • You may just want your monitors native height and width...so place those dimensions of width (first number) and height (second number) in.
 

The next step is to “Save Background”.

Before you do press that button… make a folder somewhere and use that to store the files. The program gets an error if you make a new folder as you save.

Press the “Save Background” button and navigate to that folder you made, press OK.

That’s all for that program.


Go to where you saved the files.
You will see a folder called “background” with a lot of small images in it.

There are two files.
BackgroundLayout.txt
BackgroundLoadingLayout.txt

  • If you are sharing this background for other resolutions... we need to edit both and replace the “scaled” command and replace it with “fit”.
  • If you are using that image on the native resolution only... just leave the files as they are.


Open the files in notepad. (only do this if sharing the background to be used on other resolutions)

Go to “Edit” then “Replace”. Type scaled in the top box and fit in the lower box, now press “Replace all”.
Now save the file.
Make sure you do this for both files.

 

 

So where do they go in your HL mod?


HL has a system for Mods when adding custom files.

For dod 1.3 make a folder called “dod_addon” for CS 1.6 it’s “cstrike_addon”.


That special folder is installed in \steamapps\common\Half-Life
When the engine sees that folder it will use the files from there and treat them as if they are the “dod” (or“cstrike”) game folder.

So layout the files and folders as if it is the main mod folder. The game will reference that folder as if it is the dod folder.


In your folder that you made make “resource” folder. Place the 4 text files and the “background” folder in that folder.

Now make a “dod_addon” folder, place the “resource” folder into that. The files are now in the correct order.
Place your “dod_addon” folder into \steamapps\common\Half-Life.

Run the game, you new background is displayed. Test on different resolutions, normal and widescreen in full screen and windowed mode.

Note what happened?
The image is cutting off the parts of the background it doesn’t need in the 800X600 resolution but it scales OK.

When making your images just remember its best to start high in higher resolutions and make your content more to the centre of the image and use the sides as a sacrificial area that will get cut off on lower resolutions

Files and how they work.

This is my take on how the HL25 update files work and why I assemble the files like I have. I only had time to look at and test quickly but I did see issues on resolutions if I assembled differently for the guide above.


Making a HD background to suit all aspect ratios like 4:3, 16:9, 16:10, 21:9 and 32:9, then all the different resolutions is hard.


After the HL25 update Valve introduced a few features for widescreen backgrounds. The new files allow scaling and if done correctly using the files “CS Background Maker 1.2 by kober” program make, (images and two text files) then editing the text files and adding two more, the background you make can scale to suit all resolutions and screen sizes.

I use the custom resolution of 3840X1600. Why? Its what Half-Life uses for their images and associated text files for widescreens.
Let’s look at the Half-Life background files.
In the folder \steamapps\common\Half-Life\valve\resource you will find four files that are not in the “dod” folder.

 

  • BackgroundLayout.txt - (CS Background Maker 1.2 makes this file – needs edits later using "fit" so it suits all resolutions)
  • BackgroundLoadingLayout.txt - (CS Background Maker 1.2 makes this file – needs edits later using "fit" so it suits all resolutions)

These next two can be added (or not). If making a back ground for a fixed resolution up to 4K (3840X1600) you may want to add these two...

  • HD_BackgroundLayout.txt - (Standard HL file – just add it)
  • HD_BackgroundLoadingLayout.txt - (Standard HL file – just add it)

The top 2 files are “standard” resolution and note they have “resolution 800 600” in them, when using the program “CS Background Maker 1.2” it will make a set of files of any resolution you set.
If you open the “HD_*” text files, they have a resolution of 3840 x 1600 and you can see each small image and the position on the screen that it is placed….

resolution 3840 1600
resource/background/21_9_1_a_loading.tga     fit     0       0
resource/background/21_9_1_b_loading.tga     fit    256    0
resource/background/21_9_1_c_loading.tga     fit    512    0


…and so on

Notice that for the Half-life background the images in \steamapps\common\Half-Life\valve\resource correspond to the images in this file…

 

 

 

Note the text file, the format is…

<address of the image file> then <option to “scale” or “fit”> then the Y axis and X axis value.

Before we explore all those lets look at what Y and X axis using the “resource/background/21_9_1_a_loading.tga” image settings.

The “Y” value is where the top left point of the image starts on the screen, “0” is the top left of your display.

The “X” value is where the top left point of the image starts on the screen, “0” is the top left of your display.

Every image gets its start position (the top left corner) of where to be placed on your screen.  

 

 

When you look at the first row of positions you can see the set of images with a “0” in the X axis from “21_9_1_a_loading.tga” to “21_9_1_o_loading.tga” are all on the top row.
The next row starts at 256 and then 512 and so on.


So, when using an image 3840 x 1600 is a 16:9 aspect ratio and “4K”.


The files Valve use in their background work down to 600X480 and up to 4K, using what they use is recommended.


That is the next problem, to the left of the “Y” and “X” values is another column that has a value of “fit”.
You can also place “scale” in there but it had problems when I tested it.


The program “CS Background Maker 1.2 by kober” will make that “scaled”.


To change all those files (BackgroundLayout.txt and BackgroundLoadingLayout.txt) to “fit” it is a mater of opening the two files in notepad, using the “replace” function and enter “scale” to what you want to replace and insert “fit” then replace all…save the file.


When you add HD_BackgroundLayout.txt and HD_BackgroundLoadingLayout.txt from the folder \steamapps\common\Half-Life\valve\resource they image seems to scale better.

That is the end for now, there are 100 ways to make images and a few ways to make backgrounds.

I found that this is by far the quickest and easiest.

Hope that helped someone.