How to Upload Long Artwork to a Steam Showcase
Upload tall Featured or Middle + Right Artwork to Steam: correct widths, the console paste for long images, and why the thin black line is normal.
Steps
Upload long Artwork to Steam
- 1Prepare the PNGsExport Featured 630px, or Middle 506px + Right 100px at the same height. Use /crop when starting from a Steam background.
- 2Open Steam artwork uploadUse Steam’s artwork upload / edit item flow and choose your file.
- 3Run the console codeOpen DevTools → Console, paste the Artwork (or Screenshot) one-liner, press Enter.
- 4Save and selectAdd a title, certify you created the artwork, save. A thin black line in the selector is expected; select it and check the profile.
Detail
Before you upload
You need Steam level 10 or higher to use Artwork and Screenshot showcases. Have your PNGs ready at the correct widths — from our cropper if you started with a profile background, or from your own export.
Tall artwork is the usual goal: a long vertical piece that scrolls under the showcase. Steam’s upload form fights tall files unless you adjust width/height in the browser console after choosing the file.
Detail
Widths that actually work
Match the slot. Height can be tall; mismatched width is what breaks the layout.
- Featured showcase — one image, 630px wide
- Normal Artwork showcase — Middle 506px + Right 100px, same height so the pair aligns
Featured
630px wide
Middle
506px wide
Right
100px
Use Featured alone, or Middle + Right together at the same height so the row lines up.
Detail
Console paste for tall images
Open Steam’s artwork upload page and choose your file. Then open the browser console: Chrome Ctrl+Shift+J, Firefox Ctrl+Shift+K. On Firefox you may need to type allow pasting before the paste is accepted.
Paste the Artwork one-liner below and press Enter. For Screenshot showcase uploads, add the Screenshot line as well. The on-page preview can look empty or wrong after pasting — keep going: add a title, certify you created the artwork, and save.
- Artwork / Featured: $J('#image_width').val(1000).attr('id',''),$J('#image_height').val(1).attr('id','');
- Screenshot: same as above, then $J('[name=file_type]').val(5);
Selector preview
A thin black line after the console paste is normal — select it anyway.
Console
$J('#image_width').val(1000).attr('id',''),$J('#image_height').val(1).attr('id','');Paste on Steam’s artwork upload page (F12 → Console), then save.
Detail
The thin black line is a good sign
After a successful console paste, the artwork picker often shows a thin black line instead of a thumbnail. That usually means Steam accepted the adjusted dimensions. Select the item anyway — once it loads on your profile, the full tall artwork should appear normally.
If nothing shows after save, double-check the width (630 vs 506/100), that you used the Artwork line (not only Screenshot), and that your account is level 10+.
Detail
Credit and further reading
This console approach was documented in the Steam Community guide “How to Upload Long Images for Showcases” (sharedfiles id 748624905) by ASH and collaborators. Their guide covers extras such as browser extensions; we summarize the core manual flow here in our own words.
Crop slices on SteamBackgrounds.app first, then upload with the steps above.
Help
Frequently asked questions
Next