Preview Animated Backgrounds, Avatars & Avatar Borders on your profile for FREE

This guide will show you how to preview animated backgrounds, animated avatars and everything from the Steam Points Shop on your Profile. The goal of this guide is to teach you how to take previews from the Point Shop to another level and make sure your combinations work well.

By the end of the guide you will give us a 1:1 preview of what it would look like if you purchased an item or a set of items and equipped them onto our profile. If this sounds interesting, read up on the guide and you'll be able to do this yourself in 5-10 minutes.

Note: All of the changes done within this guide will only be visible within your browser, and these changes are not permanent. They will revert back to original with a simple page refresh. This will not affect how your profile page looks to other people at all, and this does not break any steam guidelines.

So what can we edit?

In this guide we'll focus on editing the main components of our profile.

• Avatars
  
• Avatar borders
  
• Backgrounds
  
• Profile themes (are not covered by the guide since they can be previewed from the shop by default)

They say a pictures worth a thousand words, so go ahead and check these sections out in the screenshot below

Animated Avatars

Lets start off with avatars. At the time of writing there are almost 1000 animated avatars to choose from within the Steam Points Shop

Steps we need to do:

1. Navigate to the avatar we want to try out (I'll use POLLO as an example)
   
2. Right click onto the avatar and press inspect
   
3. Look for the .gif link in our inspect window and copy it
   
4. Open up our steam profile
   
5. Right click onto our avatar and press inspect
   
6. Find the image .jpg or .gif of our current avatar in the inspect window
   
7. Right click on the link, and choose edit attribute (or double click it)
   
8. Replace it with the new link we copied over from the Points Shop

Check out how these steps look like through an example below

Avatar Frames / Borders

Everyone has an avatar, but not everyone has an Avatar Frame, so in this segment we'll have some extra steps in case you don't have an avatar frame yet.

Steps if we already have an avatar frame:

1. Navigate to the avatar frame we want to try out (I'll use the DVD frame as an example)
   
2. Right click onto the avatar and press inspect
   
3. Look for the .gif link in our inspect window and copy it
   
4. Open up our steam profile
   
5. Right click onto our avatar and press inspect
   
6. Find the .gif link of our current avatar frame in the inspect window by opening up profile_avatar_frame element
   
7. Right click on the link, and choose edit attribute (or double click it)
   
8. Replace it with the new link we copied over from the Points Shop

Visualization of the process

---

Pro tip: If you dont' have an avatar frame, you can go to the Steam Points Shop - Game Profiles and click Open Preview in a New Tab in order to have a preview of your profile with an avatar border applied. From there you can edit the border using the first part of this section.

---

Steps if we don't have an avatar frame:

1. Navigate to the avatar frame we want to try out (I'll use the DVD frame as an example)
   
2. Right click onto the avatar and press inspect
   
3. Look for the .gif link in our inspect window and prepare it for the last step
   
4. Open up our steam profile
   
5. Right click onto our avatar and press inspect
   
6. Find a segment called

   <div class="playerAvatarAutoSizeInner">

7. Right click on it and select Edit as HTML
   
8. Paste this code

   <div class="profile_avatar_frame"><img src="AVATAR-FRAME-LINK"></div>

   in the line below the found segment
   
9. Right click on the AVATAR-FRAME-LINK place holder, and choose edit attribute (or double click it) in order to replace it with the new link we have ready from step 3.

Visualization of steps 6-9 (profiles with no avatar border)

Animated Backgrounds

From all of the things we've covered so far Animated backgrounds have the worst previews. Not only is their preview tiny, but when clicked we don't even see what the full background looks like, or how it matches with the colors we have in our theme, transparency of our theme and most importantly the scale of our resolution.

At the end of this step we will be able to go from inspecting backgrounds on the point shop preview, to having them animated on our own profile in full size.

---

Steps if we already have an animated background:

1. Navigate to the animated background we want to try out (I'll use the FIRST background as an example)
   
2. Right click onto the background and press inspect
   
3. Look for the video element and right click on it -> Edit as HTML
   
4. Copy the whole video element (you can use CTRL+A or CMD+A to select the full element)
   
5. Open up our steam profile
   
6. Right click onto our background and press inspect
   
7. Find the <video> element in profile_animated_background element & right click on it -> Edit as HTML
   
8. Delete the whole video element
   
9. Right click onto the profile_animated_background element -> Edit as HTML
   
10. Paste the new video element in between the angled braces >< of the profile_animated_background (delete any white space / extra spaces before pasting)

The exact position to paste the video element:

---

---

Steps if we don't have an animated background:

1. Prep the animated background container code into a notepad

   <div class="profile_animated_background">VIDEO-ELEMENT-GOES-HERE</div>

2. Navigate to the animated background we want to try out (I'll use the FIRST background as an example)
   
3. Right click onto the background and press inspect
   
4. Look for the video element and right click on it -> Edit as HTML
   
5. Copy the whole video element (you can use CTRL+A or CMD+A to select the full element)
   
6. Paste the video element into our template from step 1.
   
7. Open up our steam profile
   
8. Right click onto our background and press inspect
   
9. Right click on the highlighted element in inspector -> Edit as HTML
   
10. Paste our filled out template into the empty lines

---

After these steps we can follow the first part of the guide deleting and replacing the video element to try out more animated backgrounds in the same browser window without refreshing it.

Your Suggestions?

I hope that you learned something new reading and using this guide. If you'd like to let me know that you appreciate the guide leave a comment below or show some love through likes favorites or even Awards


If you have any suggestions or comments, don't hesitate to write and I'll get back to you as soon as I can. I hope to continue making guides, workshop items and a lot more content tailored to helping others.

Help on Basics of Inspect Elements

Through this guide we used something called the Inspect feature which is a part of Developer Tools in web browsers.

If you've never used the inspect feature in your browser and you need help understading it you can press F12 or right click -> inspect and you'll have it opened in no time.

General tips

It'll be useful to know that the elements you see in your inspect window can be opened or technically unfolded using the little triangles in the inspect window. The rotation of the triangle shows if the element is expanded or not.

---

Resolving potential issues

If you don't see anything that resembles the preview above make sure that your inspect window has the first tab selected, in Chrome this tab is called Elements, and in other browsers you might see terms like Inspector, HTML or something similar.

---

If you already learned something new consider supporting this guide by giving it some love on top of the page

[ShadowPhantom]

Hey, I have created a Firefox-Extension, that does just this, only programmatically!
At the press of a button, you can preview avatars, borders, backgrounds and mini-profiles.
It's a bit easier then changing source code for every item manually ;)
You don't even have to log in to Steam!

It's available for free in the Firefox-Store:
https://addons.mozilla.org/en-US/firefox/addon/steamprofilepreviewer/