Preview (animated) backgrounds on your profile

How to preview still and animated backgrounds on your own profile without having to use third party services like Steam Card Exchange which currently only feature still backgrounds anyway.
(Guide is based on Windows and Firefox, but can probably be interpreted for Chrome.)

Introduction and Preparation

This guide is based on Firefox-type browsers and Windows. It might work comparably on Chrome (ugh). Just transfer the general process.

If any picture shown here appears too small, remember you can click on them to enlarge.

Here is a before-and-after to make your mouth all watery:

Before:

After:


Optionally install https://augmentedsteam.com browser addon if you want a clear profile theme that shows more of the background and the ability to preview still backgrounds more easily than the process described here for previewing animated backgrounds. (It is generally a very useful addon with many features one would wish natively in Steam.)
I am currently unclear whether this clear theme works for non-AS-users, too. I seemed to be getting it on IE 11, but maybe I was mistaken, because now that browser cannot even load Steam pages properly. I tried a private browing window without addons and it shows non-clear. :-/
(Valve should really offer a clear theme natively! So many beautiful backgrounds are crippled.)


To get the clear theme, edit your profile, to to "Theme" and there Augmented Steam should allow you to select it. It wants an API data exchange confirmation, but that should be no issue, since it can only access publicly available profile information.

The clear theme works in combination with Steam's own theme option which will influence minor elements like showcase header colors.

Preview a still background

Either use the Augmented Steam background setting in your profile settings to preview or even permanently display one to other AS users or if you don't want to use the addon, here is how to do it:

Go to the points store and open a background preview (or any other place that displays a background), right-click and open the inspector.


You should already see the line with the image file. Right-click and edit the HTML code.


Then mark the image URL (starting with HTTPS and ending with an image file extension like JPG or PNG) and copy it (CTRL+C or right click menu).

Now open your profile and right-click its background to access its code via the inspector and the HTML edit mode again:


Then mark your profile's current image URL and paste (CTRL+V or right-click) the one you copied from the source.
and click to the left of the code area in the inspector to apply the change.

Now you should be seeing your profile with the chosen background and can close to inspector to get a proper look.

Preview an animated background

This feature is at least currently (and anim BGs have been around for a while) not offered by Steam Card Exchange (or not playing, and the login thingie seems tricky) or Augmented Steam, so this is the actual gold nugget of this guide and it is an additional step compared to the still BG way.

Open your profile BG code.


Edit this line.


Mark the whole line...
...and replace (CTRL+V or right-click-paste) it with the template anim-BG code provided here.


Code:

<div class="no_header profile_page has_profile_background  full_width_background" style="">
<div class="profile_animated_background">
<video playsinline="" autoplay="" muted="" loop="" poster="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/items/504400/ac6891f4a16e9dfbdfef65dc5672b01cc1abf271.jpg">
<source src="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/items/504400/6b570a8ece2b844f3a8724da571cd6b527a4793c.webm" type="video/webm">
<source src="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/items/504400/2b0792025824dfe8a1aa161ebe74ddee128d39cd.mp4" type="video/mp4">
</video>
</div>

You can either do the side-click to apply the code with the example BG or just keep this tab open for now and go to another browser tab to get your desired URL.

So go to the points store and open a background preview (or any other place that displays an animated background), right-click and open the inspector.


You should already see the line with the video file, but if it is not highlighted, it should mention VideoPreview. Right-click and edit the HTML code.


Then mark the video URL (starting with HTTPS and ending with a video file extension like WEBM or MP4) and copy it (CTRL+C or right click menu). If your browser supports WEBM (very likely), then use that one. The MP4 is only for backwards compatibility.


Now go back to your profile code edit, mark the video file URL and paste (CTRL+V or right-click) your chosen one over it.

The code might look a bit different depending on whether you have side-clicked to apply the change or not, but you simply have to replace the first video file URL with the matching file extension that you see. You also don't have to replace the image file mentioned in it because that is just a preview for when your browser doesn't autoplay videos. (Possibly check your browser addons for this if that happens.)

Now after another side-click to apply you should be seeing your profile with the chosen background and can close to inspector to get a proper look.

CONGRATULATIONS!
And shame on Valve for not providing this feature themselves, considering backgrounds are non-refundable and surely would be refunded a lot if they were.

Bonus tips

To write a guide for Steam itself instead of a game, use this link:
https://steamcommunity.com/sharedfiles/editguide/?appid=753


Also check out my related guide for properly judging mini profile formatting:
https://steamcommunity.com/sharedfiles/filedetails/?id=2705792068

[ShadowPhantom]

No need to log in anymore!
You can now preview the items by just entering a link to your profile!
You could even prank your friends, if you enter their profile url and send them a screenshot ;)

The extension is available for Firefox:
https://addons.mozilla.org/en-US/firefox/addon/steamprofilepreviewer/

[Hombre Peligroso]

@ShadowPhantom Thank you, it worked!

[ShadowPhantom]

I've created a Firefox-Extension for this purpose. Just press "Preview" and bam, it's there.
Changing the link manually every time was a bit of a hassle, although creating a firefox extension is arguably even more of a hassle haha.

You can find it in the Firefox-store for free, if anybody wants to check it out:
https://addons.mozilla.org/en-US/firefox/addon/steamprofilepreviewer/

[⛥ xira ⎆]

On stock FF 110 Arch Ctrl+Shift+C works fine, btw, not sure about FF forks though

[!¡]

How can I see a specific topic on my profile, not a selected one?

[V.V.V.]

Fair enough and also, you no longer needs to manually edit the html as Augmented Steam extension can preview Points Shop background. If the button are not appearing for you, do refresh several time.

[Dowlphwin]

@VALSHIER - That's exactly what this guide describes, dude. Except I suggest right-click method to the inspector, because at least in my Firefox-based browser your open-and-click method doesn't jump to the code.

[V.V.V.]

An easier way of going to the line is by CTRL+SHIFT+C and click your profile background in your profile page. What this do is it will inspect the element you clicked and directly jump into the relevant line since codes change all the time and this guide is already outdated as they improved their code to be more sophisticated.

[Minifloh]

Dosen't work for me. Nothing happened, but i fixed it in my case.
After you paste the link, you have to push ctrl+shift+c and then click on the background

[Alesta]

Thank you seems way too complex though