CodePen Banner Trick 🤖

Recently I've been playing around with CodePen in anticipation of my canvas game-making series I'll be publishing there soon. It caught my attention that you were able to change your profile with custom CSS, and I instantly started thinking if I could use this to bypass their PRO-only limitation on banner images.

Turns out that you can. By simply altering the background-image property of the banner, it's easy to change it to any image you want - I used one of the free assets that they provide from Unsplash.

Process

We'll start by creating a pen to hold our profile styles in. I added the following CSS to take away my profile image and the pop-up that says "customize your banner with PRO", as well as make my username bigger and add the image.

#pen-as-header-question {
  display: none;
}
#profile-image {
  display: none;
}
#profile-username {
  font-size: 26px;
}
#profile-header {
  background-image: url("https://images.unsplash.com/photo-1522252234503-e356532cafd5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODI1MjA0MTY&ixlib=rb-4.0.3&q=85");
}

Notice that by taking #profile-header and setting the background image to an image, we can change it. I haven't tested, but I'm assuming this would work with GIFs as well.

Then we'll head our profile and select Settings.

Scroll down until you notice a section labeled Custom CSS. Enter the link of your styling pen in the box and it'll auto-update.

And we're done! Check your profile for updates.

I think the best part about this is that we're not breaking any rules! This is all functionality that has been provided and not anything hacky.

Check out my profile to see how it looks.

If this helped you, drop a follow and a like and follow my CodePen. Later! 👋

Comments

[HB_the_Pencil]

That's pretty cool! I'm not on Codepen, but I wish Khan Academy would add something similar :D

[DR]

I wish they would too. There's probably some way to do it, but still if they would add a custom CSS option for customizing profiles I think the community would be super grateful.

[HB_the_Pencil]

You actually can with bookmarklets, but that's difficult because you have to know how to append style elements to HTML with JavaScript.