Help Wanted
Skinner @ The Killers (See All)
Search
Username:
Password:

Register or Reset Password

SUBMISSIONS
Counter Strike
   New Maps
   New Tutorials
   New Skins
   New GUI's
   New Sounds
   New Threads
Other
   Media
   Gamers
   Clans
   Studios
Make a CSS menu background
Difficulty: Beginner
Category: CS:S > Sprites & GUIsAuthor(s):
Did you create this? Request ownership

BlackJaÇk's CSS Background Tutorial

This tutorial is a simple step-by-step guide on how to overlap the background picture of the main Counter-Strike: Source menu. It does not effect the actual command buttons at all.

You will need:
- A program called VTEX
- Any program that can convert images to Targa File Format (.tga)
- A decent image editor

Step 1
Find an image you want for your background. It can be in any format. Make sure it's not too bright because you might not be able to see the white menu letters.

Step 2
Using your image editor, resize the image width and height in pixels to a number that corresponds with the power of 2. This is important because vtex will not accept the image if you use any old side length. Note: 1024 x 1024 works best.

Step 3
Open up your Targa File Format converter and save your image as "background01.tga" (obviously without the commas)

Step 4
Now here is where vtex comes in. Copy "background01.tga" and open up the folder "vtex". Open the folder "hl2". Then go into "materialsrc" and create a folder called "backgrounds". Paste "background01.tga" in backgrounds.

Step 5
Go back into "hl2" and go into the folder "materials". Create another folder called "backgrounds" in "materials".

Step 6
Copy "background01" from "backgrounds" and go to the folder containing the application "vtex". Right click on "vtex" and paste.

Step 7
Now go into "materialsrc\backgrounds" and you should see your original .tga and a .txt file. Copy them both and do the same thing you did in Step 6 but with both the .txt and the .tga.

Step 8
Your almost done. Go into "materials\backgrounds" and if you have done everything correctly there will be a VTF file sitting there. Cut the VTF file and paste it into "C:\Program Files\Valve\Steam\SteamApps\***YOUR_ACCOUNT_NAME***\counter-strike source\cstrike\materials\console". If any of those files do not exist - create them.

Step 9
Congratulations! Your background is now inserted into your game. Now all you have to do run Counter-Strike: Source and your picture should be at the main menu. If you don't like what you have done simply remove the VTF from console and it will be back to the default background.

If it doesn't work or you have any queries, questions etc. Feel free to contact me - teh_blackjack@hotmail.com

You can also use this tutorial to replace the picture of the computer screens in office, the plasma screen in office, the portraits on the wall of office and much more! (Read Below)

Replacing the computer screen-
Basically follow the 8 Steps in the background tutorial but change a few things:
- Make your image 256 x 256 instead of 1024 x 1024
- Instead of calling your VTF "background01", call it "screen"
- Instead of putting the VTF in "materials\console" put it in "materials\models\props\cs_office"

Replacing the plasma skin (not just the screen)-
- You will have to fiddle with the size settings depending on your skin
- Rename the VTF "TV_plasma"
- Place "TV_plasma" in "materials\models\props\cs_office"

Replacing the portrait pictures-
- Make your image 256 x 256
- Rename the VTF any of the following-
offinspa
offinspb
offinspc
offinspd
offpaintinga
offpaintingb
offpaintingd
offpaintinge
offpaintingf
offpaintingg
offpaintingh
offpaintingj
offpaintingk
offpaintingl
offpaintingo
- Place the VTF in "materials\models\props\cs_office"

Using your creativeness you can create many more skins using vtex, dont be limited to whats in this tutorial.

I hope this tutorial helped you :)

-Black.JaÇk-
teh_blackjack@hotmail.com

Added: 3 years agoTags: make, menu, background
Feedback (39)
Page of 4   1 2 3 4 Next Page
yurtpoh .
WOOT!!!Y2M
Posted 1 month ago
WAY easier to use VTFedit
- WOOT!!!
.
Fuck off telling me what to put as mottoY2M
Posted 2 years ago
There are much easier ways
Cobalt .
www.fragpegs.comY2M
Posted 2 years ago
Ya. u could just have had literally 1 step if u use VTFedit
- www.fragpegs.com
.
Do i need a cvl up nomination?Y2M
Posted 2 years ago
Vtfedit works and is so much easier as well
Wayville .
I've got something in my front pocket for you!Y2M
Posted 2 years ago
Posted by shadow_raven

Ive always wondered rather than using vtex is it possible to just open VTFedit and click import then choose the tga then import it and save it as background01.vtf or something. Why do u have to use VTEX??

Someone fill me in plz


He/she is probably just telling you the way that they've done it. Use vtf if it works
.
Do it for the lulz.Y2M
Posted 2 years ago
Ive always wondered rather than using vtex is it possible to just open VTFedit and click import then choose the tga then import it and save it as background01.vtf or something. Why do u have to use VTEX??

Someone fill me in plz
-[e1337e.weazel]- .
Die Leistung bestimmt, wer zur Elite zähY2M
Posted 2 years ago
Ig you are getting the "cant fugure out outputdir" error, heres what shuold fix it. 1. make sure the file you are pasting to vtex is in the correct directory in this case, your materials\backrounds folder. IT HAS TO B THERE BEFORE U PASTE IT INTO VTEX 2. if that sodent work, delete your v prodject file like this rigt clik my computer, properties, advanced, environmental variables, then find the one called Vprodject and delete it.
after that if it still dosent work run vconfig, select CSS and click ok. and btw good tut


I´ve got the same message, but after doing like your discription got the same message.
Now I fixed up this problem. Be sure that you put the VTEX in the right directory. it MUST BE in the dirctory where your HL2 directory is. (...:\Vavle\Steam\SteamApss\YOURACCOUNT\half-life2) Than everythings will work fine. ;) Hope I can help you.
- Die Leistung bestimmt, wer zur Elite zäh
OiZ .
BananiteY2M
Posted 2 years ago
If you have adobe photoshop jus d/load the free VTF plugin which lets you save as .vtf, which is alot easier

the link is
http://nemesis.thewavelength.net/index.php?p=39
- Bananite
OiZ .
BananiteY2M
Posted 2 years ago
If you have adobe photoshop jus d/load the free VTF plugin which lets you save as .vtf, which is alot easier
- Bananite
Drunkguitarist .
Drives U Crazy CCGDY2M
Posted 2 years ago
Posted by Beta

I thought it needed to be VTF


it does!
Page of 4   1 2 3 4 Next Page
Add Feedback
Provide constructive feedback. What is "constructive"?
You cannot post yet!
Get involved on FPSB by posting your thoughts. Give authors your feedback to help them develop.

To post in this submission register or login.
Assessment
The community's verdict.
Disapproval Warning
This submission has been disapproved and will be automatically trashed if more are made. Please check the submission and vote accordingly.
Disapproved for Broken Layout (1 time)
User Rating [+]
5.8/10
bScore
5.8/10
You cannot assess yet!
Moderating FPSB is in your hands - when you assess a submission your vote determines its success or failure.

To vote on this submission register or login.
Stamps
This Tutorial in a nutshell...
Poor Spelling
You cannot stamp yet!
Stamps let you apply characteristics to submissions to help others understand them.

To stamp this submission register or login.
None found
Added by...
Ranked 303rd with 6,333 points. 109 points behind Uba-Pook .

[+] Donate
Related Tutorials